淡出DIV基於滾動

-2

我見過一個數字，讓您使用scrollTop的（這意味着你必須測量，其中滾動）解決方案。淡出DIV基於滾動

我想知道是否有可能淡入/淡出一個div，當它擊中屏幕或獲取屏幕/視口的頂部？

乾杯

柯

來源

2014-08-30 Ke.

你是什麼意思的「點擊屏幕」？ – FrEaKmAn 2014-08-30 18:17:38

當你滾動向下，當div在視口 – 2014-08-30 18:18:30

可見時，然後檢查http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom – FrEaKmAn 2014-08-30 18:19:35

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

希望它有助於

來源

2014-08-30 18:24:52 Khaleel

嗨Khaleel，這不會做什麼即時通訊尋找。當您滾動到頁面頂部時，它會提示「頂部」。我試圖確定當你滾動在div的頂部（這是一個很長的路要走） – 2014-08-30 18:29:50

噢，讓我拿出達特 – Khaleel 2014-08-30 18:31:47

根據How to tell if a DOM element is visible in the current viewport?。代碼未經測試，希望您能理解它。基本檢查元素在視口中是否可見，如果是，則顯示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(); 
    } 
});

來源

2014-08-31 19:49:43 FrEaKmAn

淡出DIV基於滾動

回答

相關問題