.scrollTop() not working properly

193
December 10, 2016, at 1:01 PM

So I have a scrollable div with a bunch of divs inside that animate on scroll, once they've entered the scrollable div viewport.

I'm using .scrollTop() to approximate their entry in the viewport. Also, I'm using the mCustomSCrollbar to scroll.

I have a working codepen:

http://codepen.io/anon/pen/JYeyRa

Here is a snippet of my code:

setInterval(function () {
    var x1 =  $(".checkpoint").offset().top;
    if ($(".mCSB_container").scrollTop() > x1) {
        $(".notesContainer5").addClass('shown');
        if (counter5 > 0) return false;
        // Textillate if container div is :visible
        if ($('.shown').is(':visible')) {
            $(".notesCircle5").addClass("notesInAnim1-Alt");
            $('.notesTitle5').show();
            var $title5 = $('.notesTitle5').textillate({
                loop: false,
                initialDelay: 1250,
                autoStart: false,
                in : {
                    effect: 'bounceInDown',
                    delayScale: 1.5,
                    delay: 50,
                    sync: false,
                    shuffle: false,
                    reverse: false,
                },
            });
            $title5.textillate('start');

But when I try to integrate this into my site (here: http://mrlambertsmathpage.weebly.com/testpage.html), the divs do not show up when scrolling.

I have tried changing the values in the scrollTop() conditional, but I've had no luck. Can somebody help, please?

READ ALSO
highlight words in html using regex & javascript - almost there

highlight words in html using regex & javascript - almost there

I am writing a jquery plugin that will do a browser-style find-on-page searchI need to improve the search, but don't want to get into parsing the html quite yet

183
How to validate phone number using javascript

How to validate phone number using javascript

Having already a script for validate email below

282
Parse grouped json

Parse grouped json

I have this JSON structure:

189
Jquery - Reverse animation on click (toggle or if/else)

Jquery - Reverse animation on click (toggle or if/else)

I've tried a lot of different options and I'm sure most would work if I knew what I was doing

299