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

Question

我怎样才能给一个类 .navbar 固定位置的元素，只要用户使用 JQuery 滚动经过它，就让它停留在视口(viewport)的顶部。可以吗？

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

DEMO