Question

我无法检测到页面的某个部分向下滚动到何处。一旦我达到某个ID或Class，我就想运行几个函数。

我找到了this solution here，并在下面尝试了此操作，但代码未激活：

// Once you scroll into that div ID, this still does not get hit:
$( "#slice_video" ).scroll(function() {
    console.log('in scroll...');    
});


// In the comments I also saw this solution, tried it but still nothing working:

function isScrolledIntoView(elem) {
    // alert("method invoked");
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <=      docViewBottom) && (elemTop >= docViewTop));
}

if (isScrolledIntoView($('.eco_jumbotron'))){

    // initialize modals:
    modals.wireModals($());

    // Animate in Tiles
    animateTiles();
}

JsFiddle for first solution： http://jsfiddle.net/leongaban/6n4bczmu/

JsFiddle for 2nd solution http://jsfiddle.net/leongaban/yxkqafwn/

Answer 1

所以你的问题是你试图首先滚动错误的div ..然后你正在检查整个窗口的高度到那个div ..所以如果你把它改成.container滚动事件它会提醒每次滚动。你想要做的是检查相对于你正在滚动的div的滚动。这样的事情。

function isScrolledIntoView( elem, container )
{
    var contTop = $(container).offset().top;
    var contBottom = contTop + $(container).height();

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

    return ((elemBottom <= contBottom) && (elemTop >= contTop));
}
$( '.container' ).scroll(function() {
    if ( isScrolledIntoView( $( '.box4' ) , $( '.container' ) ) ) 
    {
        console.log('HERE!');
    }
});

WORKING FIDDLE

Answer 2

您必须在具有要滚动或自动溢出的容器上侦听滚动事件。

此代码确实有效：

$('.container' ).scroll(function() {
    if($(".box4").position().top < $(".container").position().top + $(".container").height()){
        // code
    }
});

<强> DEMO

我想你可以做得更好，但这是一个开始。

我希望它有所帮助。

修改

不要忘记处理这样一个事实，即每次滚动一点点并且div的位置小于容器（底边）位置时，事件就会触发

检测div何时滚动到不起作用

2 个答案: