当用户滚动到该div时,JQuery淡入div

时间:2011-03-20 09:43:17

标签: jquery jquery-waypoints

当用户向下滚动到该div时,元素<div class="">将淡入。

我找到了一个使用jQuery插件的解决方案,另一个解决方案是检查div是否在页面上可见。有用。

然而,只要用户滚动到div的顶部,它就会很快消失,因此用户无法看到div淡入。如果用户滚动到div,我该如何使div淡入? div的底部,以便用户可以看到整个div的漂亮淡入效果?

2 个答案:

答案 0 :(得分:11)

此javascript代码可能类似于您当前使用的代码,唯一的区别是使用的偏移量,它只是目标元素的offset().top() +元素的height()。随着元素的底部进入视图,演示代码在几个<li>元素中淡出。

tiles = $("ul#tiles li").fadeTo(0,0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

演示: jsfiddle.net/Marcel/BP6rqfullscreen

答案 1 :(得分:9)

你提到你使用了jQuery插件,我不知道你是否尝试过jQuery waypoints插件,你可以通过将一个偏移选项传递给插件来轻松地使用这个插件,如下所示:

// by default your element will be hidden
$('div').hide();
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

offset :确定元素顶部距离浏览器窗口顶部的距离,以触发航点。它可以是一个数字,它被视为一个像素数,一个表示视口高度百分比的字符串,或一个将返回多个像素的函数。

所以在上一个例子中,你的div不会淡入,除非它在页面的中间。