jquery-waypoints

I'm using animate.css with waypoints.js in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then animates in, that looks pretty ugly). However, I solved problem by adding two classes in my css but it creates another problem. .visible{ opacity: 1; } .invisible {opacity: 0; } // I added following jquery code $('elem').removeClass('invisible').addClass('visible fadeInUp'); This works good until I add animation-delay to an elements. Here is an

I have the below listener for a class .my-class (I'm using the waypoint plugin). However, if I try to call $(this).addClass("hello") , it does not add the class to the individual div that has the class and fired the listener. On the other hand, if I call $(".my-class").addClass("hello") inside the function instead, it adds the class hello to ALL instances of .my-class , which is not what I want. Am I misinterpreting how this is supposed to be used (I'm new to JS)? Shouldn't it refer to the single div that fires the listener and therefore add the class to that div? $(".my-class").waypoint

I'm working on a page that uses waypoints to create a sticky div that scrolls down the page with position: fixed until it reaches the bottom of its parent div. The code im using works as intended until $.waypoints('refresh') is called then the sticky div jumps back to the top of the page and loses its fixed position. Heres the code: $('#content').waypoint(function(event, direction){ if (direction === 'down') { $(this).removeClass('sticky').addClass('bottomed'); } else { $(this).removeClass('bottomed').addClass('sticky'); } }, { offset: function() { return $('#leftCol').outerHeight() - $('

Please see this: http://jsfiddle.net/5Zs6F/2/ As you can see only when you scroll past the first red rectangle it turns blue, I would like it to turn blue the moment it enters into view. This is why the second never turns blue because there isn't enough content underneath it to allow you to scroll past it. HTML: Scoll this window pane <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div class=

I'm trying to update the navigation for a single page website using jQuery waypoints. I want to update the navigation based on the current section in view. It works fine when going down using the navigation links. My problem is when you try to scroll to a section above the current section in view the active anchor is one below where it should be. Please see my Demo . jQuery $(document).ready(function(){ $('section').waypoint(function(direction) { thisId = $(this).attr('id'); $('ul li').each(function(){ var secondaryID = $(this).attr('class'); if ( secondaryID == thisId ) { $('ul li')

i'll love to have 2 offsets in jquery waypoint. Currently there is only one, the same, for up and down scrolling. I'm using a "down" offset of 25%, and would like an "up" offset of "75%". So when the top of a block is at 25% of the top of the viewport and the scolling is goin down, 'down' is triggered. And when the top of a block is at 75% of the top of the viewport and the scolling is goin up, 'up' is triggered. Anyone has already writen code for this hysteresis ? You can do this by creating two waypoints, each with different offsets, each only responding to one direction: $('.thing')

An element <div class=""> will fade in when the user scroll down to that div. I found a solution using a jQuery plugin and another solution to check whether the div is visible on the page. It works. However, as soon as user scroll to the top of div, it fades in too soon so user doesn't get to see the div fade in. How do I make the div fade-in ONLY if the user scrolls to the bottom of the div so that user can see a nice fade-in effect for the whole div? you mentioned that you used a jQuery plugin, i don't know if you have tried jQuery waypoints plugin, you can do it using this plugin easily by