Question

我有一个标识为ig-container的元素。我想添加类似

的类

$("#ig-container").addClass("animated bounceInRight");

只要它在屏幕上可见，就可以

到该元素。通过这样做，当用户滚动该元素时，我可以在该元素上实现动画。

我该怎么做？

PS：我尝试使用.is（＆＃34;：visible＆＃34;）但它没有按照我想要的方式工作，因为这会检查DOM中是否存在该元素。

Answer 1

我自己的例子，请确保你使用doctype否则$（window）.height（）返回文件高度

<!DOCTYPE html>

<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script>
            $(document).ready(function(){
                $(window).scroll(function(){

                if(($('.diff').offset().top+$('.diff').height()) < ($(window).scrollTop() + $(window).height()))
                {    
                    $('.diff').addClass('green');
                }
                });
            });
        </script>

        <style>
            .green { background:#0F0 !important; }
        </style>    

    </head>
    <body>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">2</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">3</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">4</div>
        <div class="diff" style="min-height:250px; margin-bottom:10px; background:#00F;">THIS ONE</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
        <div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
    </body>
</html>

慢慢滚动，你应该看到，一旦你通过蓝色div，它就会变为绿色

希望有所帮助

tomhre

只要元素滚动到屏幕上，就会触发事件

1 个答案: