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

Show Div on Scroll Down After 800px

Question:

How can I make a hidden div appear after scrolling down 800px from the top of the page? When scrolling up and the height is less than 800px, the div should disappear.

HTML:

<div class="bottomMenu">
  <!-- content -->
</div>

CSS:

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

jQuery Variant for Scrolling 800px:

This jQuery code will show the div after scrolling down 800px:

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

Scroll Event Variant for Hiding When Scrolling Up:

To hide the div when scrolling up and the height is less than 800px, use this code:

$(document).scroll(function() {
  var height = $(window).scrollTop();

  if (height > 800) {
    $('.bottomMenu').css({
      display: 'block',
      opacity: 1
    });
  } else {
    $('.bottomMenu').css({
      display: 'none',
      opacity: 0
    });
  }
});

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