0

I'm using the new Waypoint sticky shortcut to stick an element to the top of the view port. The issue I'm having is that I want it to unstick and hold it's position when it gets to a certain point on the page.

Here's an example using the old waypoints: http://jsfiddle.net/oskarrough/SFyCj/

I've done an extensive Google search and there are several posts which explain how to do this using the old waypoints but nothing referencing the new version.

If anyone can give me any help or guidance on how to accomplish this I'd be very grateful! 

var sticky = new Waypoint.Sticky({
    element: $('.img-container')[0],
    offset: 95
});
Ash
  • 1
  • 2

2 Answers2

0

I hope this help you.

        $('.img-container').mouseover( function() {
          sticky.destroy(); 
        })
Andriy_K
  • 56
  • 3
  • Thanks for the suggestion but that just seems to remove the 'sticky' functionality once the user hovers over the element. What I want to achieve is for the element to stick (position fixed) until a certain point and then when you scroll back up it become "stuck" again. Similar to this example: http://jsfiddle.net/oskarrough/SFyCj/ – Ash Sep 13 '15 at 20:20
  • I think you need add code to toggle class "sticky" that fixed element with css. Link for look how catch event outside block (http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) – Andriy_K Sep 13 '15 at 23:06
0

For anyone else who is struggling with this problem, I decided to use this plugin instead of waypoints.

https://viget.com/inspire/jquery-stick-em

Ash
  • 1
  • 2