当用户滚动到div时如何做某事？

Question

我有div id="content"。

如果用户看到id="content"？

，是否可以执行操作

Answer 1

我在horizontal scroll, detecting scroll position relative to anchors

回答了类似的问题

参见工作示例http://jsfiddle.net/Vy33z/4/

如果您对jQuery不太熟悉，也可以使用插件。 Appear plugin很棒且易于使用。您需要做的就是

$('#mydiv').appear(function() {
  alert('Your div is in view');
});

Answer 2

请参阅浏览器视口内部？你看过这个viewport selector插件了吗？

Answer 3

您可以使用此jQuery插件轻松完成：jQuery Waypoints

Answer 4

您可以使用.scrollTop()。类似的东西：

function scrolledTo(el, shownCallback, hiddenCallback) {
    var isVisible = false;
    var isScrolledTo = function(){
       var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(el).offset().top;
        var elemBottom = elemTop + $(el).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }

    $(window).scroll(function(){
        if(isScrolledTo()){
            if(!isVisible){
                isVisible = true;
                if(shownCallback)(shownCallback());
            }
        } else {
            if(isVisible){
                isVisible = false;
                if(hiddenCallback)(hiddenCallback());
            }
        }
    });
}

包含来自Check if element is visible after scrolling

的代码

这是fiddle。

Answer 5

您可以检查div的顶部是否在窗口视图中。 如果您低于div，则需要增强此代码。

    $(document).ready(function(){
    var divTop = $('#test5').get(0).offsetTop;

    $(window).scroll(function(){
        var windowHeight = $(window).height();
        var top = $(window).scrollTop();
        var windowBottom = (top+windowHeight);
        if(windowBottom > divTop){
            console.log('div in view');
        }
    });
});

HTML：

    <div id="test1" style="display: block; height: 200px;">1</div>
<div id="test2" style="display: block; height: 200px;">2</div>
<div id="test3" style="display: block; height: 200px;">3</div>
<div id="test4" style="display: block; height: 200px;">4</div>
<div id="test5" style="display: block; height: 200px;">5</div>