Question

我怎样才能给元素固定.navbar类的元素，并使其保持在视口的顶部，只要用户使用JQuery滚动通过它。有可能吗？

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

Answer 2

如果不需要支持IE，则可以通过使用导航栏上的CSS选择器position: sticky来实现。

body {
  height: 2000px;
}

.header {
  height: 60px;
  background: #0099ff;
  position: sticky;
  top: 15px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>
  <header class="header"></header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>

滚动过去时使元素固定

2 个答案: