A challenge we recently faced was that we needed to create a navigation that shows only when scrolling up. How did we solve it? Well, firstly, the HTML for the form was created. Keep in mind that while creating the form, Bootstrap was used. Here we have solved the problem using CSS and jQuery. Then, we created the static navigation and the navigation that should appear on scroll up. <nav = > <button = type= data-toggle= data-target= aria-controls= aria-expanded= aria-label= > < span> < a> <li = > < l> < class "main-navigation navbar navbar-expand-lg" < = = > a class "navbar-brand" href "/" </ > a class "navbar-toggler custom-toggler" "button" "collapse" "#navbarNavDropdown" "navbarNavDropdown" "false" "Toggle navigation" < = > span class "navbar-toggler-icon" </ > span /button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home <span class="sr-only">(current) </ </ > a /li>
          <li class="nav-item">
            <a class="nav-link" href="#">First link</ </ > li class "nav-item" Second link < = = > a class "nav-link" href "#" </ > a /li>
        </u </ > div /nav> We created , one beneath the other. The difference was: one should appear when scrolling up and have a different background, while the other should remain static at the top of the page. two identical navigations In order to do this, these navigations had to have . different identifiers The navigation that appears on scroll had a class ".navigation-bar-scroll", while the static navigation had a class with a different name so that the styles won't get mixed. We used the following SCSS for the navigation that appears on the scroll: `` `
.navigation-bar-scroll {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  
  &.is-hidden {
    opacity: 0;
    -webkit-transform: translate(0,-60px);
    transition: .5s ease;
  }
  
  &.is-visible {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transition: .5s ease;
  }
}
` `` Then, we used the following JQuery code to implement the "show on scroll up" functionality. `` `$(document).ready(function(){
    var previousScroll = 0;
    $(window).scroll(function(){
      var currentScroll = $(this).scrollTop();
      if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){
        if (currentScroll > previousScroll){
          window.setTimeout(hideNav, 300);
        } else if (currentScroll == previousScroll) {
          window.setTimeout(visibleNav, 300);
        }
         else {
          window.setTimeout(showNav, 300);
        }
        previousScroll = currentScroll;
      }
      /* make the scroll navigation disappear when it is scrolled on top *
      if ($(window).scrollTop() <= 150) {
          $('#navigation-scroll').css('display', 'none');
      } else {
        $('#navigation-scroll').css('display', 'flex');
      }
    });
    function hideNav() {
      $(".main-navigation-scroll").removeClass("is-visible").addClass("is-hidden");
    }
    function showNav() {
      $(".main-navigation-scroll").removeClass("is-hidden").addClass("is-visible");
      $(".main-navigation-scroll").addClass("shadow");
    }
  });
  ` `` We have achieved the effect of . This navigation bar will disappear when the scrolling reaches the top, while the second static navigation will be located at the top of the page. Looks pretty cool, doesn't it? a navigation appearing when scrolling up Here's our final tip: navigations so users don't get confused. The only difference you can add is a different background color for the navigation that appears on scroll up, so the links of the navigation stay clearly visible on the page with a lot of content. should be identical Hope you found this short blog post helpful!

Flow

Target

How To Create Box Element Using CSS Only

CarrierWave Upload Multiple Images

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Building A Navigation Flow That Shows Only On Scrolling Up using CSS and jQuery

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Annotated and Lightweight Git Tags

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

Annotated and Lightweight Git Tags

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps