滚动后将导航栏返回到原始位置

我已经设置了此页面，因此当您滚动浏览导航栏的顶部时，它会变得粘滞并停留在页面的顶部。滚动后将导航栏返回到原始位置

我希望当您回滚到页面顶部时，它会恢复到原来的位置。

这是我现在工作的CodePen。我应该如何改变jQuery，使其恢复到原来的位置？

$(window).on('scroll', function() { 

    var $header = $("#header"), 
     scrollTop = $(window).scrollTop(), 
     elementOffset = $header.offset().top, 
     distance = (elementOffset - scrollTop); 

    if (distance < 0) { 
     $header.css({ 
      "position": "fixed", 
      "top": "0px", 
      "left": "0", 
      "right": "0" 
     }); 
    } 
});

现在，这是我改变标题元素转换成固定一个为用户向下滚动页面。

来源

2015-09-06 apizzimenti

认为另一种方式的解决方案：

CSS

.affix { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
}

if (distance < 0) { 
    $header.addClass("affix"); 
} else { 
    $header.removeClass("affix"); 
}

来源

2015-09-06 08:01:45

我已经试过这一点，它的工作原理，但是当你滚过这一点，没有任何风格适用，它呈现为直线HTML。就好像当我滚动过去那个删除原始样式的点，并且不添加新样式，然后在向后滚动时重新添加它。 – apizzimenti

@apizzimenti也许你和类名有冲突，把'.affix'改成别的。 –

该类的应用程序正常工作，但在应用'.affix'类后滚动时，它会闪烁。我研究了开发人员工具，并且不断在'.affix'和默认的'.header'类之间来回切换。我怎样才能解决这个问题？ – apizzimenti

滚动后将导航栏返回到原始位置

回答

相关问题