Javascript 当我滚动超过div ID时显示div

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

我有一个章节

section id=“front-page-item-4”

。在这个

部分

我有一个名为

关于我们的短片

。我想让div

about us缩短

淡入

当您滚动到

首页-item-4

时。我找到了这段代码，但这只是在中淡出了div

about us short

，而不是当我滚动到

front-page-item-4

时

我做错了什么？看起来此代码正在查找div的

高度

首页-item-4

，但我不知道此div的高度或偏移量

$(window).scroll(function () {
    console.log($(window).scrollTop());
    var topDivHeight = $("#front-page-item-4").height();
    var viewPortSize = $(window).height();

    var triggerAt = 150;
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

    if ($(window).scrollTop() >= triggerHeight) {
        $('.about-us-short').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});

---

提前谢谢你的帮助

一个优雅的解决方案是动态获取特定div的偏移顶部，在您的例子中是

#front-page-item-4

。然后，您可以在

$（窗口）.scroll（）方法中检查是否已达到元素的偏移顶部。如果是，请将您想要的div
关于我们short
淡入

要获取元素的偏移量，可以使用jQuery方法

HTML

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

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

jQuery

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

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


var offsetTop=$（“#秒”）.offset（）.top；
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
如果（滚动顶部>偏移顶部）{
$（“#show”）。fadeIn（200）；
}
});
#首先{
高度：200px；
背景：#eee；
}
#第二{
高度：800px；
背景：rgba（0,0,0,0.3）；
}
#展示{
显示：无；
}

弗斯特
第二
第二节到达。给我看
一个优雅的解决方案是，如果您动态获取特定div的偏移顶部，在您的情况下，
#front-page-item-4
。然后，您可以在
$（窗口）.scroll（）方法中检查是否已达到元素的偏移顶部。如果是，请将您想要的div
关于我们short
淡入

要获取元素的偏移量，可以使用jQuery方法

HTML

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

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

jQuery

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

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


var offsetTop=$（“#秒”）.offset（）.top；
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
如果（滚动顶部>偏移顶部）{
$（“#show”）。fadeIn（200）；
}
});
#首先{
高度：200px；
背景：#eee；
}
#第二{
高度：800px；
背景：rgba（0,0,0,0.3）；
}
#展示{
显示：无；
}

弗斯特
第二
第二节到达。给我看
scrollTop是滚动条的位置。实际上，您希望triggerHeight是scrollTop的值，您希望about us short为fadeIn。目前看起来你的触发器高度是negative@softwarenewbie7331太好了，开始工作了<代码>变量触发器=1500成功了。您知道这是否适用于所有显示器（手机、小屏幕）。或者我应该在这里放一个变量？所有计算的目的是确定你的“首页项目4”离网页顶部有多远。。在较小的显示器上显示时可能会发生变化。希望滚动条的位置有意义。实际上，您希望triggerHeight是scrollTop的值，您希望about us short为fadeIn。目前看起来你的触发器高度是negative@softwarenewbie7331太好了，开始工作了<代码>变量触发器=1500成功了。您知道这是否适用于所有显示器（手机、小屏幕）。或者我应该在这里放一个变量？所有计算的目的是确定你的“首页项目4”离网页顶部有多远。。在较小的显示器上显示时可能会发生变化。希望这是有道理的