滚动时如何淡入 window 底部的 div？

Question

我有这个问题，解决起来可能非常简单，但我是 JS/JQuery 的新手。我有这段代码（参见 fiddle 此处：https://jsfiddle.net/Tiph/6ep3hp4j/），其中我的 div 页脚在滚动到达文档底部时显示，但我希望它在滚动到达时显示在我的header下面有一定的高度，在我的window的底部有一个固定的位置。我知道我必须用 window.height、and/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

假设您希望 header 在您从顶部滚动 100 像素时显示。

您可以这样做：

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

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

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

Answer 2

此代码 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 3

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

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

重命名 documentHeight 变量是个好主意。

Answer 4

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

<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 以设置要显示页脚的位置

滚动时如何淡入 window 底部的 div？

How to fadeIn a div at the bottom of the window when scrolling?

javascript

jquery

scrolltop