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

您必须阅读scroll-function中的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>

我认为这应该有用。

隐藏并显示基于另一个元素的滚动位置的固定div

1 个答案: