滚动时导航改为`position：fixed` X数量

我试图让导航在黑色标题下方变为position: fixed。我非常确定JavaScript需要一些调整，但我不确定此时应该做什么。滚动时导航改为`position：fixed` X数量

HTML

<div> 
    <header></header> 
    <div></div> 
    <div></div> 
    <ul id="site-navigation"> 
     <li>nav 1</li> 
     <li>nav 2</li> 
     <li>nav 3</li> 
     <li>nav 4</li> 
    </ul> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

CSS

div { 
    height: 100px 
} 
header { 
    background: #000; 
    height: 60px;  
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
#site-navigation { 
    background: yellow; 
} 
#site-navigation li { 
    display: inline-block; 
} 
#site-navigation.fix-nav { 
    position: fixed; 
    top: 60px; 
    width: 100%; 
}

// Fixed nav 
var nav = $("#site-navigation"); 

nav.on("scroll", function(e) { 

    if (this.scrollTop > 60) { 
    nav.addClass("fix-nav"); 
    } else { 
    nav.removeClass("fix-nav"); 
    } 

});

来源

2014-12-03 J82

你接近，但有几个问题。

首先，您不希望将滚动事件绑定到导航，因为导航不在滚动;窗户是。所以你需要将滚动事件绑定到窗口。然后，你需要检查使用$(window).scrollTop()（或$(this).scrollTop()滚动事件中）窗口的滚动位置

$(window).on("scroll", function(e) { 
    if ($(this).scrollTop() > 60) { 
    nav.addClass("fix-nav"); 
    } else { 
    nav.removeClass("fix-nav"); 
    } 
});

在此进行这些更改的结果：http://jsfiddle.net/kgnkxemd/3/

来源

2014-12-03 05:53:03

什么是'60'在JS代表什么？这是窗口必须滚动的总像素量吗？如果是这样，为什么它跳到[这里]（http://jsfiddle.net/kgnkxemd/7/）？但是，当我将它更改为'45'时，它的效果就好像[here]（http://jsfiddle.net/kgnkxemd/6/）。 – J82 2014-12-03 06:04:45

是的，60代表屏幕上方60个像素。它在45中效果更好的原因是因为你希望它在碰到黑色条时变得固定。所以这个数字需要是黑色栏底部和黄色导航栏顶部之间的距离。其中，如果你测量它，是40px。 – 2014-12-03 06:21:16

刚刚发现自己正确，因为你发布它:)谢谢你对此的帮助。 – J82 2014-12-03 06:22:17

scrolltop()是一个函数不是属性。像下面一样更新您的脚本。

jQuery(document).ready(function($){ 
var nav = $("#site-navigation"); 
    $(document).on("scroll", function(e) { 
    if ($(document).scrollTop() > 60) { 
     nav.addClass("fix-nav"); 
    } else { 
    nav.removeClass("fix-nav"); 
    }  
    });  
});

DEMO

来源

2014-12-03 05:59:43

滚动时导航改为`position：fixed` X数量

回答

相关问题