Hide header navigation on scroll down and show on scroll up

Hide header navigation on scroll down and show on scroll up, we see how we can hide the fixed or sticky header navigation bar when a user scrolls down the page.

This is a great example of hiding header on scroll down and shows on scroll up using JavaScript.

1. Include the id=”header” and class=”nav-down” to the header tag.
2. Write a CSS for fixed header and .nav-down, .nav-up class.
3. Write a JavaScript scrollTop() method.

HTML

<header id="header" class="nav-down">
  <nav class="navbar navbar-expand-lg navbar-light static-top">
  ....
  <nav>
</header>

CSS

header {
    border-top: 4px solid #aece0d;
    background: #fff;
    padding: 13px 0;
    display: block;
    font-weight: normal;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    -webkit-transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
    -ms-transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-down {
  -o-transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.nav-up {
  -o-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

JavaScript

<script>
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function (event) {
	didScroll = true;
});

setInterval(function () {
	if (didScroll) {
		hasScrolled();
		didScroll = false;
	}
}, 250);
function hasScrolled() {
	var st = $(this).scrollTop();

	// Make sure they scroll more than delta
	if (Math.abs(lastScrollTop - st) <= delta)
		return;

	// If they scrolled down and are past the navbar, add class .nav-up.
	// This is necessary so you never see what is "behind" the navbar.
	if (st > lastScrollTop && st > navbarHeight) {
		// Scroll Down
		$('header').removeClass('nav-down').addClass('nav-up');
	} else {
		// Scroll Up
		if (st + $(window).height() < $(document).height()) {
			$('header').removeClass('nav-up').addClass('nav-down');
		}
	}

	lastScrollTop = st;
}
</script>

In Angular – Hide header navigation on scroll down and show on scroll up

Add script in to components.ts file inside ngOnInit

ngOnInit() {

  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('header').outerHeight();

  $(window).scroll(function (event) {
      didScroll = true;

        var height = $(window).scrollTop();

        if(height > lastScrollTop && height > navbarHeight) {
            $('header').removeClass('nav-down').addClass('nav-up');
        }
        else {
          if (height + $(window).height() < $(document).height()) {
              $('header').removeClass('nav-up').addClass('nav-down');
          }
        }

        lastScrollTop = height;
  });
}

Hide div on scroll down show on scroll up using JavaScript.

In this tutorial, we learn that how to hide and show the header or navigation menu based on scrolls down and scrolls up, when the user scrolls down the page the header or navigation menu disappears smoothly on the top and appear again automatically when the user scrolls up. The jQuery scrollTop() method sets or returns the horizantal or vertical scrollbar position for the selected elements. Using the scrollTop() property you find the current scroll position of an element.

You can set the vertical scroll position of and element using the scrollTop propert

The jQuery scrollTop() method allows to add or remove style to a particular element of its original behavior by adding a class or removing the class.

Depend on the scroll of the amount you can add class to a particular element. Use the properties scrollTop(), you can hide or show header navigation or show and hide a div based on the scroll.

You can also use an animate() method with the scrollTop method to smoothly scroll the page with animation. Hide and show header smoothly with jQuery and css3 to make the fixed header navigation menu hidden.

The jQuery scrollTop() method also use for Hide header navigation on scroll down and show on scroll up, var st = $(this).scrollTop(); The jQuery scrollTop() method sets or returns the vertical scrollbar position for the selected elements. The jQuery scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Hide header on scroll down show on scroll up JavaScript, hide div on scroll down show on scroll up.