如何使底部的導航欄堅持頂部

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) 
    }); 
});