當滾動一定數量時淡入淡出

Question

我想要一個div在您滾動一定數量的像素時淡入，而不使用jquery，只使用javascript。

Answer 1

jQuery的是 JavaScript，因此除非你循環在JS的偵聽器（用於滾動）改變東西在文檔對象模型，你會發現自己不得不使用HTML5（CSS3和jQuery的一些），這樣（從Codepen）

HTML

<div class="top"><div class="title">Fade Away</div></div> 

CSS

body { 
    margin: 0; 
    height: 1000px; 
} 

.top { 
    margin: 0; 
    position: relative; 
    width: 100%; 
    background-color: #aaa; 
    height: 300px; 
    opacity: 1; 
    text-align: center; 
    font-family: 'helvetica'; 
    font-size: 80px; 
    font-weight: 100; 
    color: #fff; 
} 

.title { 
    position: absolute; 
    top: 60%; 
    left: 100px; 
} 

JS

$(window).scroll(function(){ 
    $(".top").css("opacity", 1 - $(window).scrollTop()/250); 
    }); 

有，你可以使用幾個預先寫好的視差腳本，這樣一個叫skrollr，這將使你只需添加一個參考JS文件，然後將CSS添加到您的頁面代碼中：https://prinzhorn.github.io/skrollr/

I ho PE，幫助你開始！

Answer 2

要從頂部獲取滾動位置，可以使用document.pageYOffset屬性。 淡入，你必須使用一個setInterval的東西，你可以在這裏看到：

How to do fade-in and fade-out with JavaScript and CSS