CODEWITHSUNDEEP
javascriptjquerycss
dsiglin
dsiglin

Reputation: 59

Checking visibility and adding a class with jquery/javascript but can't depend on scroll events

I'm trying to find something similar to the excellent Jquery plugin - Viewport Checker but that doesn't rely on scroll events. The reason it can't rely on scroll events is I'm also using Fullpage.js set to "autoscroll:true" which then doesn't actually scroll the page it uses 3D translate to move site around. I was wondering if anyone could point me in the right direction.

The end result of this:
I want to add a few classes onto a <div> when that <div> enters the viewport.

When I was setting up Viewport Checker this is how I had it configured

<script type="text/javascript">
$(document).ready(function() {
  $('.slide_main_paragraph_container').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInUp', // Class to add to the elements when they are visible
    offset: 100    
    });   
});  
</script>

Upvotes: 0

Views: 198

Answers (1)

dtanders
dtanders

Reputation: 1845

I think the afterSlideLoad event is the way you'd do this.

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
    var $loadedSlide = $(this),
        $main = $loadedSlide.find('.slide_main_paragraph_container.hidden');

    if ($main.length) {
       $main.removeClass('hidden').addClass('visible animated fadeInUp');
    }
}

Upvotes: 1

Related Questions