javascript - 过去滚动时使元素固定

Question

只要用户使用 JQuery 滚动过去，我如何给一个具有类 .navbar 固定位置的元素并使其保持在视口的顶部。有可能吗？

标签： javascriptjquerycssnav

Answer 1

您是否希望在滚动时到达元素顶部时固定导航栏？

CSS

#navbar.sticky {
  position: fixed;
  top: 0;
}

JS

var navbar = document.getElementById('navbar'),
    navbarOffset = navbar.getBoundingClientRect();

window.addEventListener('scroll', function(e){
  var offsetTop = navbarOffset.top;

  if(window.pageYOffset > offsetTop){
    navbar.classList.add('sticky');
  }else{
    navbar.classList.remove('sticky');
  }
});

演示