woohoook woohoook - 6 months ago 22
HTML Question

Change visibility of Node when User scrolls to it with CSS

If I have something like this:

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


I want to show the
#show
when user scroll to the
#thetarget
OR/and to manipulate with css styles of the
#thetarget
when user scroll to it, but without "click interaction" of the user as it normally would with
<a href="#thetarget">the target</a>


Is this even possible with only css code?

If it's not, how can I make this with javascript(not jquery) so it won't be impact on performance at all(=tiny affect)?

Thank you

Answer

You could also do this with pure 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>

Comments