How to Show a Div on Scroll After 800px?

Show Div on Scroll Down after 800px

Introduction

This article will address the issue of displaying a hidden div when scrolling down past a specified point on a webpage. The goal is to accomplish this after the user scrolls 800 pixels from the top of the page, while also ensuring the div is hidden when scrolling back up and the scroll height is less than 800px.

HTML Structure

The HTML for the div in question is as follows:

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

CSS Styling

The following CSS is applied to the div:

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

jQuery Script

Initially provided jQuery script:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

Revised jQuery Script for Desired Functionality

To achieve the desired functionality, the jQuery script needs to be modified as follows:

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

Conclusion

This revised jQuery script will show the div after scrolling down more than 800 pixels from the top of the page. When scrolling up and the scroll height is less than 800 pixels, the div will be hidden.

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