jQuery Waypoints - All Elements FadeIn At Once Rather Than OnScroll

StackOverflow https://stackoverflow.com/questions/19096877

  •  29-06-2022
  •  | 
  •  

Question

I'm a newb to this, but I am using jQuery Waypoint and I'm trying to get elements to "fadeIn" when scrolled into view. The problem that I'm having is that when the first element is scrolled into view, all elements fadeIn. That means you only see the first element fadeIn on scroll. The rest fadeIn outside the viewport.

I don't understand how to make each element fadeIn when scrolled into viewport. Rather than all elements fadeIn at once...

Here is my code:

      $(window).scroll(function () {
          $("#top-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#upper-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-main").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-sidebar-wrapper").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#lower-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#bottom-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#static-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-1").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-2").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-3").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-4").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-5").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
      });

EDIT: by request, here is an alternate jsFiddle for helping debug: http://jsfiddle.net/tUW8k/

Was it helpful?

Solution

Elements with display none do not live anywhere in the document. They report themselves as living at 0,0 coordinates on the page. Do not use display none elements as waypoints. Instead, animate opacity from 0 to 1.

OTHER TIPS

get a fiddle going, show some css as well. your .waypoint() function should only execute when your selection becomes visible by being scrolled to. You are sure your css is starting with display:none; for those elements?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top