Question

我正在尝试在另一个div中显示固定图像，但是仅当在某个div id内滚动时，否则我希望将其隐藏。我可以显示它，但是我的问题是，一旦离开div ID，它就不会隐藏。

 jQuery(document).on('scroll', function() {
           if(jQuery(this).scrollTop()>=jQuery('#theimeline').position().top){

               jQuery( "#Layer_1_time" ).show();
           }

       })

       });

Answer 1

您可以创建一种方法来检查给定元素在视图中是否可见。每次滚动事件触发并调用相应方法时，都调用此方法。

在下面的示例中，每当带有文本trigger div的div消失或分别出现在视图中时，图像就会被隐藏/显示。

上下滚动以查看行为：

function isElementIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

 jQuery(document).on('scroll', function() {
     if (isElementIntoView('#theimeline')) {
         jQuery('#Layer_1_time').show();
     } else {
         jQuery('#Layer_1_time').hide();         
     }
 });

.main {
  height: 2500px;
  padding-top: 250px;
}

#theimeline {
  position: absolute;
  margin-left: 500px;
  margin-top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <div id="theimeline">trigger div</div>
  <img id="Layer_1_time" src="https://via.placeholder.com/200x500" />
</div>

Answer 2

这只是一个快速答复的答案，但据我所知，您可以添加一个else条件，如果scrolltop不是> = theimline的位置顶部，则可以隐藏div

   if(jQuery(this).scrollTop()>=jQuery('#theimeline').position().top){

       jQuery( "#Layer_1_time" ).show();
   }else{
       jQuery( "#Layer_1_time" ).hide();
   }

只显示带有jQuery的特定div ID内的元素

2 个答案: