滚动时如何淡入窗口底部的div？答案

【问题标题】：How to fadeIn a div at the bottom of the window when scrolling?滚动时如何淡入窗口底部的div？
【发布时间】：2016-03-14 07:58:42
【问题描述】：

我有这个问题很可能很容易解决，但我是 JS/JQuery 的新手。我有这段代码（参见这里的小提琴：https://jsfiddle.net/Tiph/6ep3hp4j/），当滚动条到达文档底部时，我的 div 页脚会显示，但我希望它显示滚动条何时到达我的页眉下方的某个高度并具有固定位置在我的窗口底部。我知道我必须用 window.height 和/的 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);

   } 
});

【问题讨论】：

问题是它把你的内容隐藏在了底部？

标签： javascript jquery scrolltop

【解决方案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 以设置要显示页脚的位置

【讨论】：

【解决方案2】：

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

你可以这样做：

$(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()
  }
});

【讨论】：

感谢您的快速答复。但我想我解释得不好（我的不好）。我正在制作带有号召性用语按钮的主页。我的客户希望当用户滚动并且按钮不再可见时，窗口底部会显示一种粘性页脚，因此 CTA 按钮将始终可见。
只需通过按钮偏移量更改固定高度即可。您可以添加高度以确保它根本不可见

【解决方案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();
  }
});

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

我认为这将是完美的，但该值仅适用于特定的屏幕分辨率而不适用于移动设备？