Dienstag, 26. November 2013

jQuery sticky sidebar plugin

For a small project I had to search for a new sticky sidebar plugin which would meet my needs. Previously I used the plugin made by p-m-p but it had some issues with not dealing with a position to stop and if the element was not fitting to screen it moved it below the site bottom edge, so the new edge was prolonged. A user could almost scroll into infinity.

Some days ago I found another sticky sidebar plugin made by Spoiled Milk which seems to have almost perfect functionality for my purposes, it can be configured pretty good. The only small issue I had I could circumvent by adding one line and modifying another line of code to be perfect for me. My problem was that the top edge of the element I wanted to be sticky wasn't just below a generic horizontal element but one of several in a vertical row with my element being the last, so it wasn't sufficient to just get the element above my sticky element as header and getting it's height like the plugin does it as of the time of this post being written, I have to add the top offset relative to the top edge of the document.

Search for the follwing line:
var breakingPoint1 = headerHeight + navHeight;

Replace it with the following two lines:
var headerTop = $(config.headerSelector).offset().top;
var breakingPoint1 = headerTop + headerHeight + navHeight;

Et voilà, it works as intended!

Keine Kommentare:

Kommentar veröffentlichen