Javascript 当导航栏到达页面顶部时，我的粘性标题会导致后续div跳跃大约100像素，can'；我想不出解决办法？

正如我的标题所说，当导航栏到达页面顶部时，我的粘性标题会导致随后的div跳跃大约100像素。这就好像home div神奇地失去了100像素的高度。我试过几次，但都没能成功

我添加了用于平滑滚动的插件，但无法在JSFIDLE中使用。如果在导航栏到达页面顶部时缓慢向下滚动，您将注意到跳过

谢谢你的帮助

下面是我用于粘性头的代码：

<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> 

函数moveScroller（）{
var move=function（）{
var st=$（window.scrollTop（）；
var ot=$（“#nav”）.offset（）.top；
var s=$（“.nav”）；
如果（st>ot）{
s、 css({
位置：“固定”，
顶部：“0”，
背景：“rgba（0,0,0,0.65）”
});   
}否则{
如果（st因为您要从DOM流中删除该对象，所以空间可用，并且下面的元素占用了它，那么您只需向
#home
添加一些
边距即可，如下所示：

$（'#home'）.css（'marginTop'，'100px'）

检查此演示
由于您要从DOM流中删除该对象，因此空间可用，并且下面的元素将占用该空间，您只需将一些
边距
添加到
#home
，如下所示：

$（'#home'）.css（'marginTop'，'100px'）

检查此演示
使用jQuery
.height（）
方法找出导航栏的高度，将其保存到一个变量中，然后将该高度应用于页面的上边距，使其填满导航栏用来占据的空间

$（“.nav”）.height（）；

$（'#home'）.css（'marginTop'，navHeight）；

看下面的小提琴


jQuery：

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

函数moveScroller（）{
var move=function（）{
var st=$（window.scrollTop（）；
var ot=$（“#nav”）.offset（）.top；
var s=$（“.nav”），
导航高度=s.高度（）；
如果（st>ot）{
s、 css({
位置：“固定”，
顶部：“0”，
背景：“rgba（0,0,0,0.65）”
});
$（'#home'）.css（'marginTop'，navHeight）；
}否则{
如果（st使用jQuery
.height（）
方法查找导航栏的高度，请将其保存到一个变量中，然后将该高度应用于页面的上边距，使其填满导航栏过去占用的空间

$（“.nav”）.height（）；

$（'#home'）.css（'marginTop'，navHeight）；

看下面的小提琴


jQuery：

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

函数moveScroller（）{
var move=function（）{
var st=$（window.scrollTop（）；
var ot=$（“#nav”）.offset（）.top；
var s=$（“.nav”），
导航高度=s.高度（）；
如果（st>ot）{
s、 css({
位置：“固定”，
顶部：“0”，
背景：“rgba（0,0,0,0.65）”
});
$（'#home'）.css（'marginTop'，navHeight）；
}否则{
如果（st没有魔法参与。只要你没有到达滚动顶部，标题就是position:static。下面的div将显示在顶部下方。一旦元素设置为position:fixed，你就会“丢失”标题的高度，导致光学跳跃。
我认为你不需要Javascript来让你的头保持粘性

尝试删除javascript并添加此css：

编辑：很抱歉，我没有想到你的徽标。因此，这对你来说不起作用。
没有魔法。只要你没有到达滚动顶部，标题就是位置：静态。下面的div将显示在顶部下方。一旦元素设置为位置：固定，你就“丢失”头部的高度，导致光学跳跃。
我认为你不需要Javascript来让你的头保持粘性

尝试删除javascript并添加此css：

编辑：很抱歉，我没有想到你的徽标。所以这对你来说不太合适。
OT代码中的
#nav
元素是
90px
而不是
100px
会消除短暂的闪烁。尽管回答很好=）您应该在条的高度设置边距值。通过jQuery查找高度时，条可能会在不同的屏幕大小和浏览器中呈现不同的高度。是的，您是对的，因为站点是响应性的，所以应该考虑边距值，以防高度发生任何变化。@JoelLevy您可以将其保存在另一个
var中
检查此项@Dijon您不能使用
#nav
的高度，因为它是
.nav
的容器，并且当.nav是固定的时#nav heights=0。您需要检查
的高度。nav
查看您前面注释中的示例。OT代码中的
#nav
元素是
90px
而不是
100px
将删除短暂的眨眼。尽管回答很好=）您应该在条的高度设置边距值。通过jQuery查找高度时，条可能会在不同的屏幕大小和浏览器中呈现不同的高度。是的，您是对的，因为站点是响应性的，所以应该考虑边距值，以防高度发生任何变化。@JoelLevy您可以将其保存在另一个
var中
检查此@Dijon您不能使用
#nav
的高度，因为它是
.nav
的容器，并且当.nav固定时#nav heights=0。您需要检查
.nav
的高度查看您前面评论中的示例。