如何使底部的导航栏坚持顶部

Question

我对jQuery不是很有经验，所以我一直在努力应对最近我一直在努力完成的任务。

我想让窗口底部的导航栏在到达顶部时粘住。

What it should look like before and after scrolling.

我已经试过类似的方法：

var stickyNavTop = $('nav').offset().top; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > stickyNavTop) { 
     $('nav').addClass('fixed'); 
    } 
    else { 
     $('nav').removeClass('fixed'); 
    } 
}); 

Here is the entire HTML and CSS

任何帮助非常感谢，谢谢。

Answer 1

所有你需要做的是检查你想检查的元素的偏移顶部是在屏幕的顶部。如果是的话，我们只需添加一个具有固定位置和0的新类;

的jsfiddle：https://jsfiddle.net/6jczdjdj/

$(function() { 
    var distance = $('.navbar').offset().top, 
    $window = $(window); 

    $window.scroll(function() { 
    $('.navbar').toggleClass('fixedtop', $window.scrollTop() >= distance) 
    }); 
});