javascript - 当导航栏到达页面顶部时，我的粘性 header 导致后续的 div 跳转约 100 像素，无法找出解决方法？

Question

正如我的标题所说，当导航栏到达页面顶部时，我的粘性 header 导致后续的 div 跳转大约 100 像素。这就像 home div 神奇地失去了 100 像素的高度。我已经尝试了几件事，但一直无法让它发挥作用。

我已经添加了平滑滚动的插件，但无法让它在 jsfiddle 中工作。如果在导航栏到达页面顶部时缓慢向下滚动，您会注意到跳过。

感谢您的帮助!

http://jsfiddle.net/g9N78/2/

这是我用于粘性 header 的代码:

<script>
    function moveScroller() {
        var move = function() {
            var st = $(window).scrollTop();
            var ot = $("#nav").offset().top;
            var s = $(".nav");
            if(st > ot) {
                s.css({
                    position: "fixed",
                    top: "0",
                    background: "rgba(0,0,0,0.65)"
                });   
            } else {
                if(st <= ot) {
                    s.css({
                        position: "",
                        top: "",
                        background: "black"
                    });
                } 
            }
        };
        $(window).scroll(move);
        move();
    }
</script> 



<script type="text/javascript"> 
    $(function() {
    moveScroller();
    });
</script> 

Answer 1

由于您要从 DOM 流中删除该对象，因此空间可用并且下面的元素占用了它，您可以像这样向 #home 添加一些 margin:

$('#home').css('marginTop','100px');

查看此演示 http://jsfiddle.net/g9N78/3/