변경 가시성 CSS

Question

와 그것에 사용자가 스크롤 나는이 같은 경우 경우 :

<br><br><br>...Lots of BRs...<br><br><br> 
<div id="thetarget"></div><div id="show"></div> 
<br><br><br>...Lots of BRs...<br><br><br> 

내가 #show을 표시 할을 때 #thetarget에 대한 사용자의 스크롤 및/또는의 CSS 스타일로 조작하는 #thetarget 사용자가 스크롤 할 때 평소와 같이 사용자의 "클릭 상호 작용"이없는 경우 <a href="#thetarget">the target</a>

이 경우에도 CSS 코드에서만 가능합니까?

그렇지 않은 경우 성능에 전혀 영향을주지 않으므로 (jquery가 아닌) 이것을 javascript로 어떻게 만들 수 있습니까?

는 당신에게 감사

Answer 1

또한, 순수 JS와

window.onscroll = function() { 
 
    var show = document.getElementById('show'); 
 
    
 
    if (this.pageYOffset > 100) { 
 
    show.style.display = 'block'; 
 
    } else { 
 
    show.style.display = 'none'; 
 
    } 
 
}

#thetarget { 
 
    height: 1000px; 
 
} 
 
#show { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    bottom: 0; 
 
}

<div id="thetarget"> 
 
    <h1>Keep scrolling</h1> 
 
</div> 
 
<div id="show"> 
 
    <h1>Revealed</h1> 
 
</div>