Using jQuery styles

Question

I am trying to make a classic Sticky Element in reverse order.

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

Instead, I want the element that was initially hiding at the bottom of the user window, then stops and docks on the footer when it scrolls so far. Is there a better way to initialize this plugin or use another one for this?

Answer 1

Following the documentation , this 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 html).

See fiddle .

Answer 2

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

currently the element is actually part of the footer, so it would not be easy functionality to make it stop scrolling at some point on the page.

I assume that you will need to set the maximum scroll height variable in javascript, and when you achieve this 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 maximum scroll height, change the position to fixed.