如何获得固定定位div的可见事件?

时间:2015-01-30 15:02:27

标签: javascript jquery html css css3

根据我的网页布局,我想在一些元素上应用动画。

我有一个固定的定位元素。我正在使用inview.js来检测元素可见性。

加载页面后,我登录控制台:' section2 visible'使用&section 39可见'。

我希望它能够打印' section2 visible'只有当用户实际上能够阅读内容时。

我怎样才能做到这一点?

jsfiddle:http://jsfiddle.net/2610rqxa/2/

JS:

$('.section1').bind('inview', function(event, visible) {
    if (visible === true) {
        // element is now visible in the viewport
        console.log('section1 visible');
    } else {
        // element has gone out of viewport
        console.log('section1 not visible');
    }
});
$('.section2').bind('inview', function(event, visible) {
    if (visible === true) {
        // element is now visible in the viewport
        console.log('section2 visible');
    } else {
        // element has gone out of viewport
        console.log('section2 not visible');
    }
});

html:

<div class="section1">
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!    
</div>
<div class="section2">
    <h1 class="header"></h1>
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!     World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!   Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

0 个答案:

没有答案