在页面顶部显示 div，滚动时隐藏，然后在页面底部显示 div

Question

当用户位于页面顶部时，会显示 div。当他们向下滚动页面时，div 被隐藏，直到他们到达页面底部，从而再次显示 div。 div 将是一个固定的导航菜单

下面是另一位会员贴的一段代码，成功在页面底部显示了div，但始终隐藏在顶部。

原帖可以在这里找到：How to show div when user reach bottom of the page?

谢谢！

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

Answer 1

以下内容应该适合您：

编辑为使用fadeIn() 和fadeOut()

淡入淡出的附加选项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>

Answer 2

试试这个：

<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>