How to Show a Div on Scroll Down After 800px and Hide It on Scroll Up?

Show Div on ScrollDown After 800px Revisited

In this revisited discussion, we aim to refine our approach to showing a hidden div when scrolling down after 800px from the page's top.

Solution:

We employ a straightforward solution using JavaScript's $(document).scroll() function, as follows:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

Explanation:

1. scrollTop retrieves the current vertical scroll position of the page.
2. If scrollTop exceeds 800 pixels, the bottomMenu div is made visible using fadeIn().
3. Conversely, if scrollTop falls below 800 pixels, bottomMenu is hidden using fadeOut().

Enhancement for Scroll Up:

To enhance this solution, we can add functionality to hide bottomMenu when scrolling up and the scroll height is less than 800px:

if (y < 800 && $('.bottomMenu').css('display') !== 'none') {
    $('.bottomMenu').fadeOut();
}

This additional condition ensures that bottomMenu remains hidden when scrolling up and the scroll height is less than 800px.

The above is the detailed content of How to Show a Div on Scroll Down After 800px and Hide It on Scroll Up?. For more information, please follow other related articles on the PHP Chinese website!