We Keep Coding

How do I start my scroll counter again if the user scrolls back to the section?

I've made a animated counter that starts counting once you scroll into view. How do I restart the counter when a user scrolls back to the counter?
I'm sure it will be something simple that I don't know yet. Thanks for any help given, much appreciated.
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="numbers">
<div class="container" id="counter">
<h6 class="red-title">BY THE NUMBERS</h6>
<h2 class="stats-heading">We’ll always measure up to your expectations</h2>
<div class="numbers-box">
<h1 class="counter-value" data-count="50">0</h1>
<h6>years of experience</h6>
</div>
<div class="numbers-box">
<h1 class="counter-value" data-count="37">0</h1>
<h6>countires supplied</h6>
</div>
<div class="numbers-box">
<h1 class="counter-value" data-count="128">0</h1>
<h6>group automation employees</h6>
</div>
</div>
</section>

How's this?
https://codepen.io/jonolayton/pen/MWmLJze
You'll probably want to fiddle with it to make it fire accurately... I've edited some of the CSS in CodePen too, so check it on there.
Also - it only restarts when the counting has already stopped. Otherwise it could get really annoying.
var runAlready;
var counting;
function startCounter(a) {
runAlready = true;
counting = true;
$('.counter-value').each(function() {
var $this = $(this);
$this.text(a);
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
counting = false;
}
});
})
}
$(window).scroll(function() {
var oTop = $('#counter').offset().top;
var a = 0;
if (!runAlready && $(window).scrollTop() > oTop || !counting && $(window).scrollTop() < oTop) {
startCounter(a);
}
});

JS run a data-count in percentage, not in numbers

i have this code and i want it to count in percentage, not in numbers how it is showed in the next code, how can i do it?
if someone could help me please, i'm not very good at Javascript
/* Counter - CountTo */
var a = 0;
$(window).scroll(function() {
if ($('#counter').length) { // checking if CountTo section exists in the page, if not it will not run the script and avoid errors
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
},
complete: function() {
$this.text(commaSeparateNumber(this.countNum));
//alert('finished');
}
});
});
a = 1;
}
}
});
<div class="cell">
<div class="counter-value number-count" data-count="97%">1%</div>
<p class="counter-info p-small">Percentage</p>
</div>

Just add % after the text.
$this.text(Math.floor(this.countNum)+"%");
$this.text(this.countNum+"%");
$this.text(commaSeparateNumber(this.countNum)+"%");
or use css ::after (better way in my opinion because you can control the '%' style):
.counter-value::after{
content:'%';
}
And if your counter isn't percentaged - just divide it by the max value it can be and multiply by 100

Function not executing once when in viewport

I have a simple counter, which when in viewport, I want it to count up to a set number.
However, I have two issues...
Function declaration for reference:
function numberCounter() {
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 1500,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
};
Approach 1 isInViewport():
With the following code block, the function is being executed for every pixel scrolled within the div. This results in the counter jittering and not count up unless the user stops scrolling.
$(window).on(' scroll', function() {
if ($('.numberTicker').isInViewport()) {
console.log("test");
numberCounter();
$(window).off('resize scroll');
}
});
Approach 2 visible():
To resolve the above, I thought checking if the div is visible on viewport will execute the function once, however, the counter doesn't seem to work at all with this?
jQuery(document).ready(function($){
var ticker = $('.numberTicker');
if(ticker.visible(true)) {
numberCounter();
}
});
Where am I going wrong?
Full demo:
function numberCounter() {
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 1500,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
};
jQuery(document).ready(function($){
var ticker = $('.numberTicker');
if(ticker.visible(true)) {
numberCounter();
}
});
// $(window).on(' scroll', function() {
// if ($('.numberTicker').isInViewport()) {
// console.log("test");
// numberCounter();
// $(window).off('resize scroll');
// }
// });
.spacer {
height: 400px;
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- is visible plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>
<div class="spacer">scroll down</div>
<div class="numberTicker">
<h3 class="counter" data-count="50">50</h3>
</div>

Script gets triggered at bottom of div instead of top

I want to make a count up script to be triggered when i reach a specific div, but instead of when it reaches top of the div it starts when it reaches the bottom, why so?
my html:
<div id="status_counter" class="status_bar">
<div class="container text-center">
<div class="row">
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="33">0</div></h2>
</div>
</div>
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="25">0</div></h2>!-
</div>
</div>
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="15">0</div></h2>
</div>
</div>
<div class="col-sm-3">
<div class="counter-item">
<h2><div class="counter" data-count="42">0</div></h2>
</div>
</div>
</div>
</div>
</div>
my counter.js:
var eventFired = false,
objectPositionTop = $('#status_counter').offset().top;
$(window).on('scroll', function() {
var currentPosition = $(document).scrollTop();
if (currentPosition > objectPositionTop && eventFired === false) {
eventFired = true;
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 2000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
}
});
Currently: when is scroll down to the status_counter it doesnt trigger my script until i scroll down to the bottom of it.
I would like my Count up script to be triggered as soon as the status_counter div appears on my screen, so when the top/start of status_counter div reaches the bottom of the screen.

If I understand your question well this should work:
var eventFired = false,
objectPositionTop = $('#status_counter').offset().top,
objectPositionBottom = objectPositionTop;
$(window).on('scroll', function() {
var currentPositionBottom = $(document).scrollTop() + $(window).height();
if (currentPositionBottom > objectPositionBottom && eventFired === false) {
eventFired = true;
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({countNum: $this.text()}).animate({
countNum: countTo
}, {
duration: 2000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
}, complete: function() {
$this.text(this.countNum);
}
});
});
}
});

You need to check the bottom position of the element vs the bottom position of the window (which is the scrollHeight + the window height):
objectPositionTop = $('#status_counter').offset().top;
objectPositionBottom = objectPositionTop + $('#status_counter').height();
And inside the scroll you can use:
var currentPositionBottom = $(document).scrollTop() + $(window).height();
if (currentPositionBottom > objectPositionBottom && eventFired === false) {
Here is a fork of your code:
https://jsfiddle.net/rop0g9gz/1/

Catch the div you want to count when you over it:
var exampleDiv = document.getElementById("#YOUR-DIV-ID")
and attach it to the mouseover event:
exampleDiv.addEventListener('mouseover' , your-count-function)

Start counter on the scroll

I use two function on JQuery.
The first one is a counter (View here) and the second for start the counter when the Div is center on the window.
Counter
JS :
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 3000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
HTML :
<div class="counter" data-count="10000">0</div>
https://jsfiddle.net/a52e24Ls/
*
*
Scroll detection
JS :
$(window).scroll(function() {
startCounter();
});
$(window).load(function(){
startCounter();
});
function startCounter(){
$('.contributorTitle').each(function(i) {
var bottom_of_object = $(this).position().top + ($(this).outerHeight()/2);
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_object < bottom_of_window){
}
});
}
I thinks, i put the JS counter inside
if (bottom_of_object < bottom_of_window){
}
But it does not work. I want the counter start whan the window is center.