粘性导航栏 onScroll？

Question

我目前正在为自己建立一个站点，我发现在导航栏位于图像下方的多个站点上，这种效果非常棒，但是当您滚动经过它时，它会粘在顶部。

例子

我怎样才能做到这一点？另外，如何 使用类似的导航栏样式实现类似于本网站上 的效果？

原文由 Kevin Haube 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是@Matthew 所说的：

检查这个小提琴 http://jsfiddle.net/luckmattos/yp8HK/1/

查询器

var num = 200; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

希望它有所帮助，我使用了引导导航栏。

原文由 Mattos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 jQuery

 jQuery(window).scroll(function () {
     jQuery(".header-sticky").toggleClass('fixed',jQuery(window).scrollTop() > 50);
});

 .fixed{
   position: fixed;
   top: 0;
}

原文由 milad pour agha 发布，翻译遵循 CC BY-SA 4.0 许可协议