0

这就是我正在尝试的方式，但条件永远不会触发..

$(window).scroll(function(e){
            var scrollTop = $(window).scrollTop();
            var viewportHeight = $(window).height();
            $('section').each(function(){
                var top = $(this).offset().top;
                var bottom = top + $(this).height();
                if(top <= scrollTop && bottom >= (scrollTop + vieportHeight) ){
                    $(this).addClass('visible');
                    console.log('Hola');
                }else{
                    console.log(top,bottom,scrollTop,viewportHeight);
                }
            });
});

小提琴：http: //jsfiddle.net/rYeMC/

知道为什么我做错了吗？

4

4 回答 4

2

除了错字之外，您还有一个轻微的数学错误。我发现确定元素是否在屏幕上的最简单方法是确定视口的顶部和底部，并将其与元素的顶部和底部进行比较：

$(document).ready(function () {
    var viewport = $(window),
        setVisible = function (e) {
            var viewportTop = viewport.scrollTop(),
                viewportBottom = viewport.scrollTop() + viewport.height();
            $('section').each(function () {
                var self = $(this),
                    top = self.offset().top,
                    bottom = top + self.height(),
                    topOnScreen = top >= viewportTop && top <= viewportBottom,
                    bottomOnScreen = bottom >= viewportTop && bottom <= viewportBottom,
                    elemVisible = topOnScreen || bottomOnScreen;
                self.toggleClass('visible', elemVisible);
            });
        };
    viewport.scroll(setVisible);
    setVisible();
});

工作小提琴：http: //jsfiddle.net/rYeMC/2/

于 2013-06-12T23:49:01.250 回答
0

Looks like what you want:

http://jsfiddle.net/rYeMC/1/

$(function () {
    $(window).scroll(function (e) {
        var scrollTop = $(window).scrollTop();
        var viewportHeight = $(window).height();
        $('section').each(function () {
            var top = $(this).offset().top;
            var bottom = top + $(this).height();
            if (top <= scrollTop && bottom >= (scrollTop + viewportHeight)) {
                $(this).addClass('visible');
            } else {
                console.log(top, bottom, scrollTop, viewportHeight);
                $(this).removeClass('visible');
            }
        });
    });
});
于 2013-06-12T10:15:46.660 回答
0

您的代码一切正常。只需更正错字（viewport）并注意样式属性会影响您的外部css！

于 2013-06-12T10:23:50.457 回答
0

这是条件

if(scrollTop + viewportHeight >= top ){
    $(this).addClass('visible');
}
于 2013-06-12T10:37:37.040 回答