jquery - 根据另一个元素的滚动位置隐藏和显示固定 div

Question

我试图隐藏或显示一个固定的 div (.featBar) 。

（文档中还有另一个 div .featbarinline 与 .featbar 完全相同，除了它的位置，我想无缝地超越固定的 .featBar ）

您可以查看网站 www.documentjournal.com 以了解我的目标。（寻找固定在底部的白色条的行为方式）

这是我现在拥有的代码：

<script type="text/javascript">

 var  windowScroll = $(window).scrollTop(),
      slideHeight = $('.rslides1_on').height(),
      windowHeight = $(window).height(),
      diffHeight = slideHeight - windowHeight;

 $(window).scroll(function() { 
   if ( windowScroll > diffHeight ) {
     $('.featBar').show();
   } else { $('.featBar').hide(); };




});
</script>

这是我正在处理的链接：

http://thisisaust.myshopify.com/ 通行证：austaust

我也希望在调整浏览器大小时触发该功能。

Answer 1

您必须阅读滚动功能内的 scrollTop，因为它会在您每次向上或向下滚动时更新。您的代码应如下所示：

<script type="text/javascript">

 var  slideHeight = $('.rslides1_on').height(),
      windowHeight = $(window).height(),
      diffHeight = slideHeight - windowHeight;

 $(window).scroll(function() {
   var windowScroll = $(window).scrollTop();
   if ( windowScroll > diffHeight ) {
     $('.featBar').show();
   } else { $('.featBar').hide(); };

});
</script>

我认为这应该有效。