当Body Scroll击中顶部时检测到元素的底部

时间:2016-03-12 00:05:15

标签: javascript jquery html css

当窗口滚动到达所选元素的顶部时,我正在尝试使用javascript和jquery进行检测。我想我正在取得进展但仍然没有结果:

小提琴:https://jsfiddle.net/jzhang172/opvb2csy/

$(window).scroll(function() {
    var targetScroll = $('.div').position().top;
    if($(window).scrollTop() > targetScroll){
        alert('hey');
    });
});
body,html{
  height:2000px;
}
.div{
  height:300px;
  width:300px;
  position:absolute;
  top:500px;
  background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="div"></div>

2 个答案:

答案 0 :(得分:3)

$(window).scroll(function() {
    var targetScroll = $('.div').position().top;
    if($(window).scrollTop() > targetScroll) {
        alert('hey');
    }); // <=== Syntax Error: Closing Parenthese around an if block
});

答案 1 :(得分:1)

$(window).scroll(function() 
{
    var targetScroll = $('.div').offset().top - $('.div').outerHeight();
    if($(window).scrollTop() > targetScroll)
    {
        alert('hey');
    }
});

fbelanger关于语法错误是正确的,但函数仍然会在div的底部触发。只需从顶部偏移量中减去div的高度。 希望这有帮助!