JavaScript 代码不会导致图像在向后滚动时重新出现

Question

我有一个图像，如果用户向下滚动窗口超过 1000px，我希望该图像消失。我希望当用户转身并向上滚动时再次出现相同的图像。我编写了以下 JavaScript。此代码当前使图像消失，但如果向后滚动，图像不会再次显示。这就是我想要的，但此代码仅将 display 更改为 "none"。有人可以帮忙吗？谢谢!

function parallex () {
    var ypos = window.pageYOffset; 
    var image = document.getElementById('section_1'); 
    image.style.top = ypos * -.2 + "px"; 

    if (ypos > 1000){
        image = document.getElementById('section_1'); 
        image.style.display = "none"; 
    }
    else {
        image.style.display = "visible";
    }
}

window.addEventListener('scroll', parallex);

Answer 1

您应该将 display 设置为 ''(空字符串)initial，而不是 可见，在你的滚动处理程序中。

编辑: IE 似乎不支持 initial 关键字，因此我建议使用空字符串(如我所用)或 display: block (如上面评论中的 Josiah Keller 所建议)。

我还建议使用三元运算符 (condition ? valueIfTrue : valueIfFalse) 在一行代码中设置 display 属性。

function parallex () {
  var y = window.pageYOffset
  var image = document.getElementById('section_1')
  
  image.style.top = y * -.2 + 'px'
  image.style.display = y > 1000 ? 'none' : ''
}

window.addEventListener('scroll', parallex)

body { height: 3000px; }

<img id="section_1" src="http://www.placehold.it/350x1100" />