JQuery Waypoints Update

Question

I am working on a page that uses waypoints to create a sticky div that scrolls the page with the position: fixed until it reaches the bottom of its parent div. The im code uses the work as intended until $ .waypoints ('refresh') is called, then the sticky div will return to the top of the page and lose a fixed position.

Here is 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() - $('#content').outerHeight(); } }).find('#leftCol').waypoint(function(event, direction) { $(this).parent().toggleClass('sticky', direction === "down"); event.stopPropagation(); }); 

Where #leftCol is the div that scrolls the page down and #content is its parent div.

I have css:

 #content { width: 975px; height: auto; position: relative; margin-top: 10px; margin-bottom: 20px; min-height: 800px; } #leftCol { position: absolute; width: 974px; } .sticky #leftCol { position:fixed !important; top:0 !important; left: 50% !important; width: 974px !important; margin-left: -488px; } .bottomed #leftCol { position: absolute !important; bottom: 0px; } 

Any ideas on how to maintain the #leftCol position when calling $ .waypoints ('refresh') would be greatly appreciated.

thanks

Answer 1

No need, do not use the fixed position element as a waypoint. See all of the following closed-ended questions about GitHub: # 64 , # 44 , # 32 , # 26 , # 24 , # 13 , # 10 , # 4 .

This is simply the most obscure thing about Waypoints, and I'm completely mistaken in not reporting how Waypoints works well enough. I plan to make this much clearer in the next iteration of the plugin.

Interesting for someone: Waypoints works by looking at the page offset of an element. But the fixed page offset of a position item constantly changes as the user scrolls. Therefore, whenever an update is invoked, whether manually, by adding another waypoint or resizing the browser, the location of this waypoint changes according to where the user is on the page scroll at that time. What you want is an ordinary element of a static position that does not leave document flow a waypoint. In the example that I give on the Waypoints project website, the waypoint is a wrapper element that remains in place, while nav wraps profit and loses fixed positioning via CSS. It is very easy for someone who doesn't understand page offsets and CSS to do what the OP did here, as it looks intuitive. Again this is what will be discussed more directly in the documentation / examples in the future.