Search code examples
jquerysticky

Jquery waypoints sticky element should trigger at bottom of div

I have a parallax scrolling website on which there is a sticky element that should change it's background image everytime it hits a different part of the website.

$("#level2").waypoint(function() {
          $("#changing_element").css("background-image","url(a.jpg)");
    });

$("#level1").waypoint(function() {
          $("#changing_element").css("background-image","url(b.jpg)");
          }, { offset: 'bottom-in-view'
    });

That works for scrolling down, but not for scrolling up, the waypoint only triggers when the elemten reaches the top of the #level1.

But it needs to be triggered when the sticky #changeing_element reaches the bottom (while scrolling up) of it...

An advice!

Thx!

Solution

  • Since I couln't figure out a right wy to do this, I just added another div.bottomdiv.

    .bottomdiv {
position: absolute;
bottom: 0;
width: 10px;
height: 10px;
}

$(".bottomdiv").waypoint(function() {
              $("#changing_element").css("background-image","url(b.jpg)");
        })

    That works fine now!