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

如果用户在窗口下方滚动的次数超过1000px，我想要消失图像。如果用户转身回滚，我想让该图像重新出现。我写了下面的JavaScript。此代码目前会使图像消失，但如果您向后滚动，它将不会再次显示图像。这是我想要的，但此代码只将display更改为"none"。有人可以帮忙吗？谢谢！JavaScript代码不会导致图像在滚动时重新出现

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

来源

2017-03-08 J Seabolt

'显示= “块”'，'不visible' –

另外，还可以删除重复'图像=的document.getElementById（ 'section_1'）;'这就是下'如果（ ypos> 1000）{'。 – freginold

您应该设置display到''（空字符串）~~initial~~，不visible，在您的滚动处理。

编辑：它看起来像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" />

来源

2017-03-08 18:50:54 gyre

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

回答

相关问题