CODEWITHSUNDEEP
htmlnavbar
John
John

Reputation: 39

HTML -- How can I make my navbar stick after scrolling to a certain point on page?

How can I make my navbar stick after scrolling to a certain point on page? I don't want it to stick immediately after scrolling past it, but rather once I reach another div on the page.

Upvotes: 2

Views: 3435

Answers (1)

DividedByZero
DividedByZero

Reputation: 4391

Try this:

window.onscroll = function() {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  if (scrollTop >= document.getElementById("d").offsetTop) {
    document.getElementById("nav").style.position = "fixed";
    document.getElementById("d").style.marginTop = "50px";
    document.getElementById("nav").style.marginTop = "-50px";
  } else {
    document.getElementById("nav").style.position = "static";
    document.getElementById("d").style.marginTop = "0px";
    document.getElementById("nav").style.marginTop = "0px";
  }
}
nav {
  width: 100%;
  height: 50px;
  background: red;
  z-index: 100;
}
body {
  margin: 0;
  min-height: 1000px
}
#d {
  position: relative;
  top: 100px;
  width: 100%;
  height: 50px;
  background: yellow;
}
<body>
  <nav id="nav"></nav>
  <div id="d"></div>
</body>

When you scroll to the yellow div, the red navbar sticks to the top of the viewport and stays there until you scroll up

Upvotes: 4

Related Questions