Question

我想制作一个简单的效果，当我滚动直到导航显示在顶部时，导航变得固定并因此保持在那里，但当再次滚动到顶部时，导航再次变为非固定。我在某处找到了这个脚本，但是当导航触到屏幕顶部后，它会在固定位置和静态位置之间切换，即if和else语句。 jquery：

$(window).scroll(function() {
    var y = $("nav").offset().top;
    var scrollY = $(window).scrollTop();
    if (scrollY > y) {
        var padY = scrollY - y;
        $("nav").css({'position': 'fixed', 'top': '0', 'width': '100%'}).stop(); 

    }
      else{

      $("nav").css({'position': 'static', 'width': '100%'}).stop(); 
      }

});

这是小提琴：http://jsfiddle.net/QB3tV/7/

Answer 1

(scrollY > y)将随每个滚动像素而变化，因为您在测量后会改变位置。尝试(scrollY >= y)或添加未添加fixed样式的'ghost'元素，并根据该元素做出决定。

例如，基于你的jsfiddle：

添加ghost元素：

<div id="ghost"></div>
<nav>
    <div class="wrapper">
    <ul> . . .

然后更改测量元素：

$(window).scroll(function() {
    var y = $("#ghost").offset().top;
    var scrollY = $(window).scrollTop();
    . . .

然后它应该完美地运作。

http://jsfiddle.net/xRBq5/

建议使用position:sticky属性（请参阅here），但目前支持very poor。

if-else语句在我滚动的每个像素上切换

1 个答案: