Html 使元素在向下滚动时淡入

[已删除]

隐藏信息，因为它措词不当，只需简单搜索即可回答

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以淡入您的元素

换句话说，在循环中使用scrollCheckdocument.GetElementByIdeElement。

您可以使用window.onscroll事件并检查scrollY属性，如下所示：

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;
}

请参见更新的示例：