How can I trigger this Count up event each time someone scrolls to a specific section?

fjimenez 0
Viewed 20

I am trying to trigger this code each time someone scrolls to that section, the code works fine because it does trigger but it only does it once. I am trying to think of the easiest way to make it trigger every time someone scrolls to that section. I tried taking off the !viewed from the condition and it does trigger but the countdown then goes backwards, not really sure why.

This is the code I have but only triggers once.

<script>

var viewed = false;

function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function testScroll() {
  if (isScrolledIntoView(jQuery(".numbers")) && !viewed) {
      jQuery('.value').each(function () {
          jQuery(this).prop('Counter',0).animate({
              Counter:  jQuery(this).text()
          }, {
              duration: 4000,
              easing: 'swing',
              step: function (now) {
                  jQuery(this).text(Math.ceil(now));
              }
          });
    });
  }

}

</script>

Here is the link to my current code.

https://codepen.io/fjadvocates/pen/PoeKWbq

jquery javascript
1 Answers

Consider the following.

jQuery(function($) {

  var viewed = false;

  function isScrolledIntoView(elem) {
    var inView = false;
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + ($(elem).height() / 2);
    inView = (elemTop >= docViewTop) && (elemBottom < docViewBottom);
    return inView;
  }

  function testScroll() {
    console.log("Scroll Event", $(window).scrollTop());
    if (isScrolledIntoView($(".numbers"))) {
      console.log("Numbers in View");
      if (viewed == false) {
        console.log("Not Viewed.");
        viewed = true;
        $('.value').each(function() {
          $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
          }, {
            duration: 4000,
            easing: 'swing',
            step: function(now) {
              $(this).text(Math.ceil(now));
            }
          });
        });
      }
    }
  }

  $(window).scroll(testScroll);
});
.bigblock {
  height: 800px;
  background: red;
  color: white;
  font-size: xx-large;
  text-align: center;
}

.bigblock p {
  font-size: x-large;
}

.numbers {
  padding: 40px 0;
}

.numbers .flex {
  flex-wrap: wrap;
  justify-content: space-between;
}

.numbers .number-item {
  width: 45%;
  padding: 20px 0;
  text-align: center;
  font-size: 1.4em;
}

.numbers .number-item h2 {
  font-weight: 500;
}

.numbers .number-item h6 {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bigblock">
  Scroll Down.<br>
  <p>The Idea is to scroll down then it triggers but when you scroll out of it and come back to the same section, it should trigger again, from 0 to whatever the value was originally.</p>
</div>
<section id="wegetresults-hp" class="container-fluid text-center blueish-bg numbers">
  <hr class="line w-25 d-block mx-auto">
  <div class="row d-flex justify-content-center py-5 ">
    <div class="col-md col-sm-6 number-item">
      <span class="counter">$</span> <span class="counter value ">500</span>
      <p>Millions recovered for clients.</p>
    </div>
    <div class="col-md col-sm-6 number-item">
      <span class="counter value ">20</span>
      <p>Offices and counting</p>
    </div>
  </div>
  <div class="row d-flex justify-content-center py-5 ">
    <div class="col-md col-sm-6 number-item">
      <span class="counter value ">50000</span>
      <p>Clients helped</p>
    </div>
    <div class="col-md col-sm-6 number-item">
      <span class="counter value ">200</span>
      <p>Team members committed to you</p>
    </div>
  </div>
</section>

The primary issue is your logic. Since .numbers was the last element, the window could not scroll far enough to overcome the height needed to be true. If you reduce the height by half, the element is largely in view. Obviously, you can adjust as needed.

Twisty0
Related