Show div at top of page, hide when scrolling, then show div at bottom of page

问题

When a user is at the top of a page, the div is shown. When they scroll down the page, the div is hidden until they reach the bottom of the page, whereby the div is shown again. The div would be a fixed navigation menu

Below is some code posted by another member, which successfully shows the div at the bottom of the page, but always hides it at the top.

Original post can be found here: How to show div when user reach bottom of the page?

Thanks!

    <script>
    $(document).ready(function() {
        $(window).scroll(function() {
            if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
                $("#hi").css("display","block");
            }else {
                $("#hi").css("display","none");
            }
        });
    });
</script>

回答1:

The below should work for you:

Edited to use fadeIn() and fadeOut()

Additional options for fading available here

$(document).ready(function() {
  
        $(window).scroll(function() {
          
          //get the height of your menu
          var menuHeight = $('#hi').height(); 
          
          //get offset from top and bottom
          var top = $(this).scrollTop();
          var bottom = $(document).height() - $(this).height() - $(this).scrollTop();
            
          //check to see if we are at the top, bottom, or in between
          if (top < menuHeight) {
              //at top set classes to show menu at top
              $('#hi').removeClass( 'bottom' );
              $('#hi').addClass( 'top' );
            
              // use `show()` to show the div imediately
              //$('#hi').show();
            
              //or use `fadeIn()` to fade the div in gradually
              //The strings 'fast' and 'slow' can be supplied to 
              //indicate durations of 200 and 600 milliseconds, respectively
              $('#hi').fadeIn( 'slow' );
          } 
          else if (bottom < menuHeight) {
              //at bottom set classes to show menu at bottom
              $('#hi').removeClass( 'top' );
              $('#hi').addClass( 'bottom' );
              
              //$('#hi').show();
              $('#hi').fadeIn( 'slow' );
          }
          else {
              //somewhere in between, hide menu
              //$('#hi').hide();
              $('#hi').fadeOut( 'slow' );
          }

          
        });
  
});

#hi{
  width: 100%;
  height: 60px;
  background-color: #cccccc;
  vertical-align: middle;
  text-align: center;
  font-size:3em;
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="hi" class="top"> This is my cool 'hi' div!</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

回答2:

Try this :

<script>
    $(document).ready(function() {
        $(window).scroll(function() {
            if ($("body").height() <= ($(window).height() + $(window).scrollTop()) || $(window).scrollTop() <= 50) {
                $("#hi").css("display","block");
            }else {
                $("#hi").css("display","none");
            }
        });
    });
</script>

来源：https://stackoverflow.com/questions/27577436/show-div-at-top-of-page-hide-when-scrolling-then-show-div-at-bottom-of-page