0

Is there a way to show an image or a div when scrolling down a web page and hide it when not scrolling and vice versa?

So in the code below the red div would be displayed when not scrolling, and the green div would be displayed only when scrolling.

.square {
  position: fixed;
  width: 100px;
  height: 100px;
}

.green {
  background: green;
  display: none;
}

.red {
  background: red;
}

.container {
  width: 100%;
  height: 3000px;
}
<div class="container">
  <div class="square green"></div>
  <div class="square red"></div>
</div>

The end goal is to achieve something like this: https://mailchimp.com/annual-report/ where the character appears to be walking when the user scrolls, and stands still when the user stops. Is this easily achievable?

tacoshy
  • 10,642
  • 5
  • 17
  • 34
ActualStudio
  • 9
  • 2
  • what have you tried so far JS-wise? Where are you stuck by simpyl suing the `scroll`-eventListener? – tacoshy Jun 23 '22 at 16:34

2 Answers2

0

You just need an eventListener that listen to a scroll event. However this has the issue that it only recoginze when you scroll but not when you stop scrolling. For that you can use this answer that explains how to listen for a "scroll-stop"

To make the code shorter and easier, I removed your display: none from the green box. I added a new class d-none that contains this proeprty now instead. By default it is added to the green box.

With classList.toggle('d-none') I can toggle class within both boxes which makes it easier then to address and then add or remove the class for every box on its own.

var timer = null;
var box = document.querySelectorAll('.square');
window.addEventListener('scroll', function() {
  if (timer !== null) {
    clearTimeout(timer);
  } else {
    box.forEach(el => el.classList.toggle('d-none'));
  }
  timer = setTimeout(function() {
    box.forEach(el => el.classList.toggle('d-none'));
  }, 150);
}, false);
.d-none {
  display: none;
}

.square {
  position: fixed;
  width: 100px;
  height: 100px;
}

.green {
  background: green;
  /* display: none; */
  /* removed */
}

.red {
  background: red;
}

.container {
  width: 100%;
  height: 3000px;
}
<div class="container">
  <div class="square green d-none"></div>
  <div class="square red"></div>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • Thank you tacoshy. My JS knowledge is limited. I can see how to use event listener to listen to the scroll but not to stop scrolling. It just seems to switch between red and green whenever you start scrolling. – ActualStudio Jun 23 '22 at 17:11
  • read the linked answer that explains it. on scroll you set a timer to `150ms` with `setTimeout`. SO if you keep scrolling you always set it back to 150ms. while you stop scrolling, the function will run out and the timer be `null` – tacoshy Jun 23 '22 at 17:14
0

You just need a setTimeout function:

(function($) {
  $(function() {
    $(window).scroll(function() {
      $('.square.red').show()
      $('.square.green').hide()
      clearTimeout($.data(this));
      $.data(this, setTimeout(function() {
        $('.square.red').hide()
        $('.square.green').show()
      }, 250));

    });
  });
})(jQuery);
.square {
  position: fixed;
  width: 100px;
  height: 100px;
}

.green {
  background: green;
}

.red {
  background: red;
  display: none;
}

.container {
  width: 100%;
  height: 3000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="square green"></div>
  <div class="square red"></div>
</div>
KDM
  • 20
  • 4