Search code examples
jqueryjquery-waypoints

"Parking" a div with jquery Waypoints.js

I've created a div that becomes fixed as expected. However later on down the page I want it to become "parked" once scrolling reaches a specific div. Can this be accomplished?

<div class="content">
    <div class="topper"></div>
    <div class="margins">This is .margins
        <div class="container"> This is .container
            <div class="waypoint">.waypoint - gets .stuck</div>
        </div>
    </div>    
    <div class="stophere">How can I make .waypoint park here until I scroll back up?</div>
</div>

JS:

$('.stophere').waypoint(function(direction) {
  $('.waypoint').waypoint('unsticky');
});

I've created a fiddle where I've been trying things for hours now.

Solution

  • Instead of $('.waypoint').waypoint('unsticky'); add a class to your waypoint item. Style that class as needed to place it where you want. The exact styling you need will depend on your page, so I cannot provide more detail.