スクロールダウン時に要素をフェードインさせる

Question

[削除]

簡単な検索では答えられなかった情報を隠します。

Answer 1

function scrollCheck(element) { 
    var top = element.getBoundingClientRect().top; 
    var bottom = element.getBoundingClientRect().bottom; 
    if((top >= 0) && (bottom <= window.innerHeight)) { 
     fadeIn(element) 
    } 
} 

function fadeIn(element) { 
    var op = 0.1 
    rate = 0.1 
    var timer = setInterval(function(){ 
     if (op >= 1) { 
      clearInterval(timer); 
     } 
     element.style.opacity = op; 
     op += op * rate; 
    },50); 
}; 

関数scrollCheckを繰り返し呼び出して、指定された要素までスクロールダウンしたかどうかを確認します。彼が持っている場合、scrollCheckはfadeInにあなたの要素をフェードインさせるでしょう。

つまり、ループでscrollCheck(document.getElementById("element"))を使用します。

Answer 2

あなたはwindow.onscrollイベントを使用してscrollYプロパティをチェックし、このようにすることができますhttps://jsfiddle.net/71uncr2g/1/

：

var h = window.innerHeight; // calculate this only once to avoid redraws 
window.onscroll = function(e) { 
    var scrollH = window.scrollY, 
     ratio = parseFloat(scrollH/h), // current scroll percentage vs. page height 
     benchmark = parseInt(ratio) % 10 === 0; // update opacity only every 10% 
    if (benchmark) 
    document.getElementById('cornericon').style.opacity = ratio; 
} 

更新の例を参照してください。