Run a JS function while in viewport.

Question

I've found on here how to do a counter, and I will be using it on a scrolling site.

I'm using the following code:

$(function() {
    function count($this){
        var current = parseInt($this.html(), 10);
        $this.html(++current);
        if(current !== $this.data('count')){
        setTimeout(function(){count($this)}, 10);
    }   
}
  $("span").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
  });
});

I've tried to include the following code, but I'm not sure I'm adding it correctly:

      if ($('element').visible(true)) {

}

Heres a link to the Jfiddle that is currently working without the if statement. Any help would be appreciated.

http://jsfiddle.net/WpJxn/257/

What does **viewport** have to do with anything? Expand your question to be a bit clearer. If you want the activity to only happen when the element is visible, then you will need a trigger that fires your `if` statement - probably [scroll](http://api.jquery.com/scroll/) is your best bet. — random_user_name, Jun 14 '14 at 20:01
I've checked your fiddle - what is it exactly you are trying to do? — random_user_name, Jun 14 '14 at 20:02
This is going to go on a one page scrolling site and is at the bottom of the page. So I would like to trigger the count up when someone scrolls to that specific section. It would be pointless to run the JS when no one is able to see it. — jamie, Jun 14 '14 at 20:03
As a visual example if it were to go on this site in the contact section. http://rockets-are-red.com/ Since you have to scroll to see the contact content. I would like it to wait to run the count till you see that section. — jamie, Jun 14 '14 at 20:04

score 2 · Accepted Answer · edited May 23 '17 at 12:28

This is what you should look at: Check if element is visible after scrolling

Here is an example for you that demonstrates this technique: http://jsfiddle.net/XYS2G/ - just try to scroll the Result window.

HTML:

<div class="indicators">
    <span class="indicator" data-id="section1">section1</span>
    <span class="indicator" data-id="section2">section2</span>
    <span class="indicator" data-id="section3">section3</span>
    <span class="indicator" data-id="section4">section4</span>
    <span class="indicator" data-id="section5">section5</span>
    <span class="indicator" data-id="section6">section6</span>
</div>
<div class="sections">
    <div class="section" id="section1">section1</div>
    <div class="section" id="section2">section2</div>
    <div class="section" id="section3">section3</div>
    <div class="section" id="section4">section4</div>
    <div class="section" id="section5">section5</div>
    <div class="section" id="section6">section6</div>
</div>

CSS:

.indicators { position: fixed; }
.section { height: 150px; }

JavaScript:

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

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

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

function refreshIndicators() {
    $('.indicator').each(function () {
        if (isScrolledIntoView($('#' + $(this).attr('data-id')))) {
            $(this).css('color', 'red');
        } else {
            $(this).css('color', 'black');
        }
    });
}

refreshIndicators();

$(window).bind('scroll', refreshIndicators);

Run a JS function while in viewport.

1 Answers1