在页面顶部显示div，在滚动时隐藏，然后在页面底部显示div [英] Show div at top of page, hide when scrolling, then show div at bottom of page

问题描述

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

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

下面是另一个成员发布的一些代码，该代码成功地将div显示在页面底部，但始终将其隐藏在顶部.

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.

原始帖子可以在这里找到:当用户到达页面底部时如何显示div?

Original post can be found here: 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>

推荐答案

以下应为您工作:

已修改为使用fadeIn()和fadeOut()

用于淡化的其他选项在此处可用

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

这篇关于在页面顶部显示div，在滚动时隐藏，然后在页面底部显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！