Fire event after scrolling to a specific div or id

Question

I've searched a lot these days but i didn't manage to solve my problem.

I have the script below which is a simple counter, that counts some stats starting from 0. It starts when my page loads. I would like to fire this event when i scroll to a specific div or id, but only once. I saw a lot examples with .one() method etc. but i didn't find out the proper solution.

Here is my script.

<script type="text/javascript">

$.fn.jQuerySimpleCounter = function( options ) {
        var settings = $.extend({
        start:  0,
        end:    100,
        easing: 'swing',
        duration: 500,
        complete: ''
    }, options );

    var thisElement = $(this);

    $({count: settings.start}).animate({count: settings.end}, {
        duration: settings.duration,
        easing: settings.easing,
        step: function() {
            var mathCount = Math.ceil(this.count);
            thisElement.text(mathCount);
        },
        complete: settings.complete
    });
};

$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});

</script>

So what should i add to trigger it after reaching a certain div or id...?

Maybe this will help you.. http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible — Tasos K., Nov 07 '15 at 20:43
Take a look at this plugin http://imakewebthings.com/waypoints/guides/getting-started/ — Nenad Vracar, Nov 07 '15 at 21:52

score 0 · Answer 1 · edited Oct 28 '16 at 10:31

0

This should give you the result you're looking for:

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  var one = $('element').position().top;
  var count = 0;
  if (scroll > one) {
    var newCount = count + 1;
    if (newCount === 1) {
      //do something
    };
  };
});

edited Oct 28 '16 at 10:31

Peter Badida

11,310
10
44
90

answered Nov 07 '15 at 20:43

Nicholas Tibbs

170
10

This is a great way to achieve that, but now i have to trigger the event only once, because each time i scroll to the specific div the counter starts again and again... – FotisK Nov 07 '15 at 20:51
you mean.. if (scroll > one) { ? – FotisK Nov 07 '15 at 21:07
unfortunately the event triggers everytime i scroll. Maybe i have to increase a var somewhere? – FotisK Nov 07 '15 at 21:12
the `count` variables must be declared outside of the event handler, otherwise its value is always 0 – jakopo87 Nov 08 '15 at 07:41

score 0 · Answer 2 · answered Nov 07 '15 at 21:22

I managed to find a "good" solution that works for me. doing the below "not so good" thing. :) Thanks Nikolas for your help.

<script type="text/javascript">

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  var one = $('.tworow').position().top;
  var two = $('.endrow').position().top;
  if (scroll > one & scroll < two) {

$.fn.jQuerySimpleCounter = function( options ) {
        var settings = $.extend({
            start:  0,
            end:    100,
            easing: 'swing',
            duration: 500,
            complete: ''
        }, options );

        var thisElement = $(this);

        $({count: settings.start}).animate({count: settings.end}, {
            duration: settings.duration,
            easing: settings.easing,
            step: function() {
                var mathCount = Math.ceil(this.count);
                thisElement.text(mathCount);
            },
            complete: settings.complete
        });
    };

$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});

  };
});

When the scroll reaches a certain div it starts, and after that i put another div where the event should end, controlling it with an if condition. Now the area of the page that triggers the event is a very small "area" between 2 divs.

Fire event after scrolling to a specific div or id

2 Answers2