woohoook woohoook - 1 year ago 50
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
when user scroll to the
OR/and to manipulate with css styles of the
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


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 id="show">