Question

我见过很多让你使用scrolltop的解决方案（这意味着你必须测量滚动的位置）。

我想知道是否有可能淡入/淡出div，当它到达屏幕或到达屏幕/视口的顶部时？

干杯

柯

Answer 1

使用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");
   }
});

希望它有助于

Answer 2

基于How to tell if a DOM element is visible in the current viewport?。代码未经测试，希望您理解它。基本上检查元素在视口中是否可见，如果是，则为fadeIn，如果为no则为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();
    }
});

基于滚动淡入/淡出div

2 个答案: