CODEWITHSUNDEEP
javascriptjquerycssnav
user9982219
user9982219

Reputation:

Make element fixed when past scrolled

how can I give an element with class .navbar fixed position and make it stay on top of the viewport as long as the user scrolls past it using JQuery. Is it possible to do?

Upvotes: 0

Views: 42

Answers (2)

dysfunc
dysfunc

Reputation: 2008

Are you looking to pin the navbar when you reach the top of the element while scrolling?

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

Upvotes: 1

Roman Mahotskyi
Roman Mahotskyi

Reputation: 6625

If you don't need to support IE, you can achieve this by using CSS selector position: sticky on the navigation bar.

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>

Upvotes: 0

Related Questions