淡入/淡出元素

-2

我有this工作在一個項目上，但我想在頁面的頂部和底部做同樣的效果。淡入/淡出元素

E.g.在頁面底部，當滾動到視圖中時，元素淡入淡出視圖時淡入淡出。頁面頂部也是如此，元素淡出視圖並淡入到視圖中。

我試圖創造相反的效果，但他們似乎相互抵消，沒有元素顯示或他們在滾動時閃爍。

$(window).scroll(function() { 
    $(".fade").each(function() { 
     var height = $(".header").outerHeight(true); 

     if (($(this).offset().top - $(window).scrollTop()) < height/1.5) { 
      $(this).stop().fadeTo("fast", 0); 
     } else { 
      $(this).stop().fadeTo("fast", 1); 
     }  
    }); 
});

這是可能做或我是否錯過了什麼？

來源

2016-08-07 Pezmo

99％的問題需要[MCVE（** M ** inimal，** C ** omplete和** V ** erifiable ** E ** xample）]（http：// stackoverflow.com/help/mcve）。請發佈與您的問題相關的JavaScript/jQuery，CSS和HTML。使用任何或所有以下服務創建演示： [jsFiddle.net]（https://jsfiddle.net/）， [CodePen.io]（https://codepen.io/）， [Plunker。（http://plnkr.co/）， [JS Bin]（https://jsbin.com/）或片段（位於文本編輯器工具欄或CTRL + M上的第7個圖標）。 – zer00ne

關於在頁面上顯示/隱藏元素時滾動的主要思想是在每個滾動事件中檢查這些塊是否在當前視圖中您的代碼的問題在於fadeOut/In在最後隱藏元素（display：none），所以在這之後，我們無法正確地獲得當前偏移量（）。top我建議你做的只是通過使用fadeTo（）來改變塊的不透明度。

我爲你 https://jsfiddle.net/9uqom17x/

$(window).scroll(function(){ 

    var height = $(window).innerHeight(); 
    var currentScroll = $(window).scrollTop()+height; 

    $(".fade").each(function(){ 
      var $this = $(this); 

      var _scrollTop = $this.offset().top; 
      var _height = $this.innerHeight(); 

      if(_scrollTop+_height/2 < currentScroll){ 
     if(! $this.hasClass("active")){ 
      $this.stop().addClass("active") 
      .fadeTo(500, 1);   
     } 
      } else { 
       $this.stop().removeClass("active") 
      .fadeTo(500, 0); 
      } 
    }); 
}).trigger("scroll");

有它的樂趣這個例子。

來源

2016-08-07 23:54:06 RedaElkhayat

淡入/淡出元素

回答

相關問題