基于滚动淡入/淡出div

我看到了许多解决方案,可以使用滚动条(这意味着您必须测量滚动条的位置)。

我想知道是否可以淡入/淡出div,当它碰到屏幕或到达屏幕/视口的顶部时?

干杯


使用JQuery:检测底部:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       $("#divId").FadeIn("400")
   }
});

检测顶部:

$(window).scroll(function() {
   if($(window).scrollTop()  == 0) {
       alert("top!"); 
      $("#divId").FadeOut("400");
   }
});

希望能帮助到你


基于如何判断一个DOM元素在当前视口中是否可见? 代码未经测试,希望您能理解它。 基本检查元素在视口中是否可见,如果是,则显示fadeIn或如果没有则显示fadeOut。

function isElementInViewport(el) 
{
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= $(window).height() &&
        rect.right <= $(window).width()
    );
}

var $element = $('#element');
$(window).on('DOMContentLoaded load resize scroll', function()
{
    if(isElementInViewport($element[0]))
    {
        // we check if fadeIn is in progress
        if(!$element.is(":visible"))
        {
            $element.fadeIn();
        }
    }
    else
    {
        $element.fadeOut();
    }
}); 
链接地址: http://www.djcxy.com/p/83587.html

上一篇: fade in/out div based on scroll

下一篇: Stop video from loading in background on mobile