バックスクロール時に画像が再表示されないようにする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、ないvisible、''に設定する必要があります。

編集：（上記のコメントにJosiah Kellerの助言として）IEがinitialキーワードをサポートしていないので、私は空の文字列のいずれかを使用することをお勧めします（私が持っているとして）またはdisplay: blockのように見えます。

また、3行演算子（condition ? valueIfTrue : valueIfFalse）を使用して、1行のコードに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" />