0

I am working on a Bootstrap use case. I have designed a menu using Bootstrap. I want the menu to be hidden when I scroll down, and the menu to be displayed if I scroll up. (slide-down / slide-up).

I want to use jQuery for this functionality.

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {

    $('.center-menu').slideUp();

    $(bottomDiv).fadeIn();
  } else {
    $('.center-menu').slideDown();
    $(bottomDiv).fadeOut();
  }
}
Ali Yazdanifar
  • 372
  • 4
  • 12
  • 2
    Welcome to SO. You might find reading the site [help section](https://stackoverflow.com/help) useful when it comes to [asking a good question](https://stackoverflow.com/help/how-to-ask). To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a [mcve]. [Here's a question checklist you might find useful.](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist). – Andy May 23 '21 at 16:35
  • 1
    I found this thread. As said by Andy you could have found this by a simple google search `https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px` – NotTheWaquar May 23 '21 at 16:36

1 Answers1

2

This use case can be performed using JQuery. You can hide a div using a call like this:

 $('#menu').hide();

To show a div, use this call:

$('#menu').show()

Of course, you need to put in logic to handle the scroll. Something like this will work.

var lastScrollTop=150;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

More information here.

Ali Yazdanifar
  • 372
  • 4
  • 12
smac2020
  • 9,637
  • 4
  • 24
  • 38