-2

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

Sosian
  • 622
  • 11
  • 28
woohoook
  • 13
  • 3

1 Answers1

1

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>
keziah
  • 564
  • 1
  • 6
  • 24