javascript - 修复 div 的滚动 - 我如何使 div 出现在导航栏的正下方而不是文档的顶部

Question

我有这个 div (#callback)，它在提交时通过 ajax 异步加载，用于更新或删除元素。这是您在页面顶部看到的绿色消息框 http://i1379.photobucket.com/albums/ah126/conchairtoe/1_zpsefd13e23.png 当它“滚动”时是这样的: http://i1379.photobucket.com/albums/ah126/conchairtoe/2_zps6b0c658b.png

我目前拥有它，以便它保持在屏幕的可见范围内，具有“固定滚动”效果，但是，我不希望它位于文档的最顶部，除非滚动偏移量达到它，此时我希望它在我滚动时保持固定。

我希望它位于导航栏的正下方，而不是在滚动偏移尚未达到时叠加在导航栏之上。

这是 JS:

// Notification-Message Position
            $(window).scroll(function(e){ 
                var el = $('#callback'); 
                if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
                    $('#callback').css({'position': 'fixed', 'top': '0px'}); 
                }
                if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
                    $('#callback').css({'position': 'static', 'top': '0px'}); 
                } 
            }); //END Notification-Message Position

这是 CSS:

    /*FIXED ON SCROLL*/
#callback{

    position:fixed;
    top:0;
    width:100%;
    z-index:100;

}

抱歉这个愚蠢的问题，但我对此很陌生。

Answer 1

使用这个，

$(window).scroll(function(e){ 
                var el = $('#callback'); 
                if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
                    $('#callback').css({'position': 'absolute', 'top': '0px'}); 
                }
                if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
                    $('#callback').css({'position': 'static', 'top': '0px'}); 
                } 
            }); //EN

在 css 中也是如此，

   /*FIXED ON SCROLL*/
#callback{

    position:absolute;
    top:0;
    width:100%;
    z-index:100;

}