Question

[DELETED]

隐藏信息，因为它的措辞很差，并通过简单的搜索来回答。

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属性，如下所示：

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

请参阅更新示例：https://jsfiddle.net/71uncr2g/1/

向下滚动使元素淡入

2 个答案: