Using JQuery Sticky Elements

问题

I'm trying to do the classic Sticky Element in reverse.

See http://imakewebthings.com/jquery-waypoints/sticky-elements/ for an example of a typical sticky experience.

What I want to do instead, is to have an element that initially docks flush with the bottom of the users window, and then stops and docks on the footer when he scrolls down that far. Is there a better way to initialize this plugin, or use another to accomplish this?

回答1:

Following the documentation, it can be achieved as follows:

$('#footer').waypoint(function(event, direction) {
    $('#footer-content').toggleClass('sticky', direction === 'up');
}, {
   offset: function() {
      return $.waypoints('viewportHeight') - $(this).outerHeight();
   }
});
​

I assign .sticky to #footer-content initially (in the html).

See fiddle.

回答2:

you can change the css to make it flush with the bottom of the screen by setting bottom : 0px for the .top class selector

currently the item actually is a part of the footer so it would not be an easy functionality to add to make it stop scrolling at a certain point at the page.

i imagine you would have to set a max scroll height variable in the javascript and when you reach that scroll, get the offset of the element, change its position to absolute and set the position to the offset that you saved. if they are below the max scroll height, change position back to fixed.

来源：https://stackoverflow.com/questions/9590087/using-jquery-sticky-elements