How Can I Show a Div After Scrolling Down 800 Pixels?

Show div on scrollDown after 800px

Scenario:
You require a hidden div to appear when scrolling down at least 800 pixels from the page's top. To achieve this, an existing example needs modifications.

Solution:

To fulfill your request, modify the jQuery code as follows:

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

Explanation:

• The scroll() event listener monitors the page's scroll position.
• When scrolling down past 800 pixels (y > 800), the .bottomMenu div becomes visible using fadeIn().
• When scrolling back up to a height below 800 pixels (y < 800), the div fades out using fadeOut().

Example:

<!-- HTML -->
<div class="bottomMenu">
  <!-- content -->
</div><pre class="brush:php;toolbar:false"><!-- CSS -->
.bottomMenu {
    display: none;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0;
    z-index: 100;
}

The above is the detailed content of How Can I Show a Div After Scrolling Down 800 Pixels?. For more information, please follow other related articles on the PHP Chinese website!