div淡出內部div元素

我來到了下面的小提琴，它讓元素在文檔頂部時逐漸淡出文檔1。div淡出內部div元素

通過執行JavaScript：

$(window).scroll(function() { 
    $('[id^="box"]').each(function() { 
     if (($(this).offset().top - $(window).scrollTop()) < 20) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
});

http://jsfiddle.net/JdbhV/6/

只有這樣，工作滿窗上，我希望它在一個div標籤的工作。所以我修改了小提琴添加DIV測試和所有其他的div裏面就有，然後修改JavaScript搶DIV來代替窗口：

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
     if (($(this).offset().top - $("#test").scrollTop()) < 20) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
});

http://jsfiddle.net/JdbhV/1692/

但現在它們消失得太快，而不是當他們到達格的頂部。

有人有指針這裏有什麼問題嗎？

來源

2016-11-23 Gerard van den Bosch

的.offset（）方法允許我們以檢索元件相對於一個的當前位置到該文件。

滾動窗口並不會改變文檔中元素的位置，但是在另一個元素內部滾動元素卻可以。這會導致偏移位置發生變化，拋出檢查以查看Box是否位於滾動視圖的頂部。

嘗試使用.position()方法獲取相對於父項的位置。

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
      //When the top of the square goes above the top of the scroll element, fade it out 
     if ($(this).position().top < 0) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
});

http://jsfiddle.net/ys0m6axL/

來源

2016-11-23 05:41:02 CaTs

原因是jQuery將div透明化。但是divs仍然存在，這意味着它們的高度仍然很重要。

所以，特別是對於這種情況，您唯一需要的就是減法。使用20減去div（100px）的高度和div之間的空格（也就是100px），每個div（以及它周圍的空間）總共有200px。

嘗試下面的代碼，看看它是否有效。

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
     if (($(this).offset().top - $("#test").scrollTop()) < 20 - $(this).index() * 200) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
});

祝你好運。

來源

2016-11-23 05:32:57

嘗試在計算中使用div頂部代替scrollTop。

我已經在這個直線變更計算：

if (($(this).offset().top - $("#test").offset().top) < 20) {

的jsfiddle：http://jsfiddle.net/JdbhV/1697/

$("#test").scroll(function() { 
    $('[id^="box"]').each(function() { 
      if (($(this).offset().top - $("#test").offset().top) < 20) { 
      $(this).stop().fadeTo(100, 0); 
     } else { 
      $(this).stop().fadeTo('fast', 1); 
     } 
    }); 
});

來源

2016-11-23 05:37:03 tejashsoni111

這裏是jsfiddle例子。

你只需要從

$(this).offset().top - $("#test").scrollTop()) < 20

更改條件要

$(this).offset().top < $("#test").offset().top

$（「＃測試」）。偏移（）。頂部是決定何時做高度淡入淡出的行動。
現在，這是容器的頂部＃測試。

來源

2016-11-23 06:08:27

div淡出內部div元素

回答

相關問題