Question

我需要检测HTML元素何时被完全隐藏，我发现了许多示例，并且大多数检测到div接触文档的顶部时，在示例中是绿线，我想要的是检测何时这个绿线隐藏着croll的运动。

编辑：我需要检测当标签关闭之后的绿线以及当用户的Scroll移动到达顶部时的绿线，而不是检测到打开的时间边缘到达顶部的元素，如果没有，当具有绿色边框的标签的关闭到达顶部时，即隐藏完整的DIV时。

$(function(){
   $(window).on('scroll', function() {
      var scrollTop = $(window).scrollTop();
      var elementOffset = $('.element').offset().top;
      var currentElementOffset = (elementOffset - scrollTop);      
      console.log( currentElementOffset );
   });
});

body {
  display: block;
  min-height: 1250px;
  border-bottom: 2px;
}

#content {
  display: block;
  min-height: 250px;
  border-bottom: 5px solid rgb(121,185,0);
  background-color: rgb(250,250,250);
}


#content:after {
  content: "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div class="element"></div>
</div>

Answer 1

您可以像这样实现：

根据元素的偏移+高度检查文档的滚动位置。

＆＃13;

$(document).ready(function() {
  var scroll_pos = 0;
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    var element1 = $('#content').offset().top + $('#content').height();
    if (scroll_pos > element1) {
      alert("Passed");
    }
  });
});

＆＃13;

body {
  display: block;
  min-height: 1250px;
  border-bottom: 2px;
}

#content {
  display: block;
  min-height: 250px;
  border-bottom: 5px solid rgb(121, 185, 0);
  background-color: rgb(250, 250, 250);
}

#content:after {
  content: "";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div class="element"></div>
</div>

＆＃13;

Jquery通过滚动运动检测元素何时完全隐藏

1 个答案: