Question

我有这个问题很难解决，但我是JS / JQuery的新手。我有这个代码（请参阅这里的小提琴：https://jsfiddle.net/Tiph/6ep3hp4j/）当滚动到达文档的底部时，我的div页脚会显示，但我希望它显示滚动在我的标题下的某个高度时的显示我窗口底部的固定位置。我知道我必须用window.height和/ of offsetTop计算一些东西，但没有任何效果。有人可以帮我吗？非常感谢！： - ）

我的代码在这里：

var footer = $('#footer'),
    extra = 10; 

footer.css({ opacity: '0', display: 'block' });

$(window).scroll(function() {

   var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
       documentHeight = $(document).height();


    console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )


   if( scrolledLength >= documentHeight ) {

       footer
          .addClass('bottom')
          .stop().animate({ bottom: '0', opacity: '1' }, 300);

   }
   else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {           
        footer
           .removeClass('bottom')
           .stop().animate({ bottom: '-100', opacity: '0' }, 300);

   } 
});

Answer 1

我为您创建了新的示例代码，以了解其工作原理

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $(window).scroll(function() {
        var count=700;
          var menuHeight = $('#footer').height()+count; 
          var top = $(this).scrollTop();
          var bottom = $(document).height() - $(this).height() - $(this).scrollTop(); 
        if (bottom < menuHeight) {

              $('#footer').removeClass( 'top' );
              $('#footer').addClass( 'bottom' );
              $('#footer').fadeIn( 'slow' );
          }
          else {
              $('#footer').fadeOut( 'slow' );
          } 
        });
});
</script>  
<meta charset="utf-8">  

</head>  
<body>  
<style>
#footer{
  width: 100%;
  height: 60px;
  background-color: #cccccc;
  vertical-align: middle;
  text-align: center;
  font-size:3em;
}

.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display:block;
}
</style>
<div style="height:2000px;"></div>
<div id="footer" style="display:none" > This is your footer</div>
<div style="height:700px"></div>

尝试更改数字700以设置要显示页脚的位置

Answer 2

假设您希望在从顶部滚动100px时显示标题。

您可以执行以下操作：

$(window).on("scroll", function() {
  if(document.body.scrollTop >= 100) {
    $("#footer").fadeIn()
  } else {
    $("#footer").fadeOut()
  }
});

比如说，如果ID为callToAction的按钮位于视口上方，您只想显示标题，您可以这样做：

$(window).on("scroll", function() {
  if(document.getElementById('callToAction').getBoundingClientRect().top <= 0) {
    $("#footer").fadeIn()
  } else {
    $("#footer").fadeOut()
  }
});

Answer 3

此代码var y = $(this).scrollTop();从顶部获取滚动高度。

 $(window).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) { // scroll gets at a certain height 
    $('.bottomDiv').fadeIn();
  } else {
    $('.bottomDiv').fadeOut();
  }
});

Answer 4

如果我正确理解了您的问题，您需要将documentHeight更改为您想要的值。

示例：documentHeight = 150;不是documentHeight = $(document).height();

最好重命名documentHeight变量。

滚动时如何淡化窗口底部的div？

4 个答案: