How to remove announcement bar when scrolling down and make it visible when scrolling up again?

Highlighted
Explorer
167 2 8

Hi all,

I'm trying to let my announcement bar dissapear when scrolling down and bring it back when scrolling up, i got this working for my menu already with this code:

 //Hide Header on on scroll down
      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-section').removeClass('nav-down').addClass('nav-up');
          } else {
              // Scroll Up
              if(st + $(window).height() < $(document).height()) {
                  $('.header-section').removeClass('nav-up').addClass('nav-down');
              }
          }

          lastScrollTop = st;
      } 

How can I do this with my announcement bar aswell?

Website url: www.smartnutrition.nl or smartsnutrition.myshopify.com

Password is: plazay

Thanks in advance!

0 Likes