基於滾動位置的內容淡入淡出

Question

我已經設置了下面的功能來淡入淡出/在某些內容的基礎上，它靠近頁面的頂部/底部。如果點擊頂部的ABOUT鏈接，所需效果非常明顯，但如果使用WORK按鈕向下滾動內容，則會在正確的位置彈出，但不會像頂部一樣發生漸變。

我敢肯定，它有事情做與scrollBottom相當於我已經建立，但不知道如何去解決這個

http://coreytegeler.com/new

$(window).load(function(){ 
     $(window).scroll(function() { 
     var st = $(window).scrollTop(); 
     var sb = $(document).height() - $(window).height() - $(window).scrollTop(); 
     $('#about .content').css({'opacity' : (1 - st/450)}); 
     $('#work .content').css({'opacity' : (450 + sb*-1)}); 

     $('#home .content').css({'opacity' : (-(450 + sb*-1))}); 
     $('#home .content').css({'opacity' : (-(1 - st/450))}); 
     }); 
    }); 

Answer 1

在我的瀏覽器，裝載着你的頁面文檔高度爲2892，窗口高度爲952.將這些尺寸插入到方程中會使＃工作的不透明度從-1478到450不等。這樣當窗口從底部開始顯示450像素時開始顯示，當完全淡入時該窗口距底部451px - 可能比您想要的快一點。

如果更改工作線

$('#work .content').css({'opacity' : ((450 + sb*-1)/450)}); 

那麼你的不透明度會有所不同，從-3.28至1，穿越0，並開始漸顯當窗口已經從底部滾動450像素，達到了1.00（當窗口一直向下滾動時，100％淡入）。