如何让底部的导航固定在顶部

Question

我在jQuery方面不是很有经验，所以我最近一直在努力完成我一直在努力完成的事情。

我希望位于 window 底部的导航在到达顶部时保持不变。

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

您需要做的就是检查要检查的元素的偏移顶部是否位于屏幕顶部。如果是，那么我们只需添加一个新的 class ，它具有固定位置和顶部 0;

jsFiddle : https://jsfiddle.net/6jczdjdj/

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

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

如何让底部的导航固定在顶部

How to make nav at bottom stick to top

jquery

html

css

nav

sticky