How can I add start at a cetrain height property to my JavaScript?-CodePudding

My page contains a counter and I want to add a method that makes the counter start when a certain height has been reached. I've calculated that I want the counter to start at the height of 324px, but since I have very little experience with JavaScript I'm not sure what am i looking for. Can someone help me?

Here's my current code:

const counters = document.querySelectorAll('.counter');
const speed = 2000;

counters.forEach(counter => {
  const updateCount = () => {
    const target =  counter.getAttribute('data-target');
    const count =  counter.innerText;

    const inc = target / speed;

    if (count < target) {
      counter.innerText = Math.ceil(count   inc);
      requestAnimationFrame(updateCount, 1);
    } else {
      count.innerText = target;
    }
  }

  updateCount();
});

  <div >
    <div >
      <div >
        <div >
          <div  id="purple-b">
            <i ></i>
            <div  data-target="231">0</div>
            <p >Happy Users</p>
          </div>
          <div  id="green-b">
            <i ></i>
            <div  data-target="385">0</div>
            <p >Issues Solved</p>
          </div>
          <div  id="red-b">
            <i ></i>
            <div  data-target="159">0</div>
            <p >Good Reviews</p>
          </div>
          <div  id="orange-b">
            <i ></i>
            <div  data-target="127">0</div>
            <p >Case Studies</p>
          </div>
          <div  id="blue-b">
            <i ></i>
            <div  data-target="211">0</div>
            <p >Orders Received</p>
            <p></p>
          </div>
        </div>
      </div>
    </div>
  </div>

CodePudding user response：

I don't know if this is what you're looking for or not. If it's wrong you can describe it more, because I do not quite understand it.

Let's say I have a page with 3000px CSS:

.counter{
  height: 3000px;
}

And I want whenever I scroll pass the 324px, it'll do something for you

const counters = document.querySelectorAll('.counter');

window.onscroll=function(){
   if(scrollY >= 324){
        console.log("Do your start count things or something in here")
   }
}

CodePudding user response：

I will do that this way :

use the same requestAnimationFrame() for both elements, and stop it when there is none to update

const
  speed = 2000
, counters = [...document.querySelectorAll('.counter')]
             .map(el=>(
               { el
               , target :  el.dataset.target
               , inc    : (el.dataset.target / speed)
               , count  : parseInt(el.textContent)
               }))
  ;
requestAnimationFrame(updateCount)

function updateCount()
  {
  let elmsRun = counters.length 
  counters.forEach(({ el, target, inc, count}, i) =>
    {
    el.textContent = counters[i].count 
                   = (count < target) ? Math.ceil(count inc) : target
    if (counters[i].count === target) --elmsRun
    })
  if (elmsRun) requestAnimationFrame(updateCount)
  }