fade in/out div based on scroll

Ive seen a number of solutions that let you use scrolltop (which means you have to measure where the scroll is).

Im wondering if it is possible to fade in/out a div, when it hits the screen or gets to the top of the screen/viewport?

Cheers

Ke

---

Using JQuery: Detect bottom:

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

Detect top:

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

Hope it Helps

---

Based on How to tell if a DOM element is visible in the current viewport?. The code is untested, hopefully you understand it. Basically check if element is visible in the viewport, and if yes fadeIn or if no then 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/83588.html

上一篇: 点击可见元素使用木偶

下一篇: 基于滚动淡入/淡出div