CODEWITHSUNDEEP
javascript
WPasman
WPasman

Reputation: 25

Javascript: Nav bar disappears when scrolling up and reaches the top

I have created a navigation bar on my website (still in development). This navigation bar appears when a visitor is scrolling up. However, the nav bar remains all the way to the top. At the top I have the original menu, so need to have the nav bar as well.

What I would like to achieve is that the menu bar disappears as soon as the visitor hits a certain point, like hitting a div and it disappears. So far no luck with it. I use -70px (position:fixed) to place the nav bar outside the viewport and make it via Javascript appear when a visitor is scrolling up.

This is the Javascript for the nav bar:

var lastScrollTop = pageYOffset || document.documentElement.scrollTop;

window.addEventListener("scroll", function() {
   var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop) {
// Scroll Down

$('.navbar').css({
   "transform": "translate3d(0,-70px,0)"
});

} else {
 // Scroll Up

$('.navbar').css({
   "transform": "translate3d(0,70px,0)"
});
}
   lastScrollTop = st;
}, false);

Any help to make the nav bar disappear when hitting a certain div scrolling up will be much appreciated. Thanks in advance!

This is the closest I got, see below. Basically it does what I need (disable the nav bar in a certain area, in this case 350px from the bottom). I just need it to be the top, not the bottom.

$(window).scroll(function() {
var pxFromBottom = 350;
if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
$('.navbar').css({
  "transform": "translate3d(0,-70px,0)"
});
} 
});

Upvotes: 0

Views: 1742

Answers (2)

WPasman
WPasman

Reputation: 25

Update: with some trial and error I managed to get it to work. I've added a second condition which hides the menu bar when scrolling up. I added this part: if ((st > lastScrollTop) || ($(this).scrollTop() < 500)) { This is the condition by which the nav bar hides when it comes at 500 px from the top.

var lastScrollTop = pageYOffset || document.documentElement.scrollTop;

window.addEventListener("scroll", function() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if ((st > lastScrollTop) || ($(this).scrollTop() < 500)) {
    // Scroll Down
    $('.navbar').css({
      "transform": "translate3d(0,-70px,0)"
    });
  } else {
    // Scroll Up
    $('.navbar').css({
      "transform": "translate3d(0,70px,0)"
    });
  }
  lastScrollTop = st;
   }, false);

Upvotes: 0

Edmundo Santos
Edmundo Santos

Reputation: 613

You could do this using Headroom.js. It's a lightweight (2KB), high-performance JS widget (no dependencies!) that allows you to change classes based on the user's scroll.

I would advice to hide your header with translateY(-100%) instead of using pixel values, so even if your header height changes it would still work fine.

Quick demo below:

var header = document.querySelector('.header');
var headroom = new Headroom(header, {
  "offset": 200,
  "tolerance": 5,
  "classes": {
    "unpinned": "header--unpinned"
  }
});
headroom.init();
.header {
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  color: white;
  background: black;
  transition: all .4s cubic-bezier(.770,0,.175,1);
}

.header--unpinned {
  transform: translateY(-100%);
}

/* Demo purposes only */
body { height: 2000px; margin: 0; }
p { padding: 2rem; }
/* Demo purposes only */
<script src="https://unpkg.com/headroom.js"></script>

<header class="header">Header</header>

<!-- Demo purposes only -->
<p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p>
<!-- Demo purposes only -->

There's a lot more you can do, like changing the header color on scroll (e.g. Poppulo's website) or even using different animations (see Headroom.js playroom).

Upvotes: 1

Related Questions