Question

所以我认为这是一个非常直截了当的问题，但我找不到我在这里寻找的正确答案。如果以前曾问过这个问题，请原谅我。

我有一个section id="front-page-item-4"部分。在这个section中，我有一个名为about-us-short的div。滚动浏览about-us-short时，我希望得到div fade-in front-page-item-4。我发现了这段代码，但这只会消除div about-us-short，而不是当我滚过front-page-item-4时。

我做错了什么？看起来这段代码正在寻找div height的{{1}}，但我不知道这个div的高度，也不知道偏移...

front-page-item-4

先谢谢你的帮助......

Answer 1

如果你动态获得特定div的偏移顶部，那么优雅的解决方案就是#front-page-item-4。然后，如果已达到元素的偏移顶部，则可以检查$(window).scroll()方法。如果是，则淡化您想要的div about-us-short in。

要获取元素的偏移量，您可以使用jQuery offset()方法。

<强> HTML

<section id="first">
  <h1>First</h1>
</section>

<section id="second">
  <h1>Second</h1>
  <div id="show">Second div reached. Show me</div>
</section>

<强> CSS

#first{
  height: 200px;
  background: #eee;
}

#second{
  height: 800px;
  background: rgba(0,0,0,0.3);
}

#show{
  display: none;
}

<强>的jQuery

var offsetTop = $("#second").offset().top;

$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();
  if(scrollTop > offsetTop){
    $("#show").fadeIn(200);
  }
});

var offsetTop = $("#second").offset().top;

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop > offsetTop) {
    $("#show").fadeIn(200);
  }
});

#first {
  height: 200px;
  background: #eee;
}
#second {
  height: 800px;
  background: rgba(0, 0, 0, 0.3);
}
#show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="first">
  <h1>First</h1>
</section>

<section id="second">
  <h1>Second</h1>
  <div id="show">Second div reached. Show me</div>
</section>

滚动div ID时显示div

1 个答案: