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代碼不會導致圖像在滾動時重新出現

回答

相關問題