Make sticky cognizent of top and bottom margins.

[heathdutton]

So we're using sticky for a bunch of navigational items, that may or may not have margins on the top or bottom (typically the bottom).

The library doesn't take this margin into account when determining the height, and so text gets bumped around when it gets activated. Not cool... We can remove those margins, but then that means we have to add those margins to other things, and it just feels like a bit of a hack.

Is there a better way I'm missing, or should I create a PR?

Example: https://jsfiddle.net/heathdutton/85k7g8vt/5/

[eSilverStrike]

I am seeing this as well. I have made a sticky module in Joomla and the modules have a margin-bottom of 30px.

When I enable the sticky plugin for that module the margin gets ignored and the module underneath it gets put right against the bottom of the sticky module (when the module is not in sticky mode).

It's a little weird when you load the page as you see the screen render correctly with the modules equally spaced on the left and then you will see the modules under the sticky module jump up to be right under the sticky module.

[eSilverStrike]

Okay I found a fix for this. In the file jquery.sticky.js you should find about 5 occurrences of

.outerHeight()

It references of the height of the sticky item. Replace it with:

.outerHeight(true)

This tells jQuery to include the margin in the height: http://api.jquery.com/outerheight/

Not sure why this is not on for the plugin by default. There probably is a reason. If not, lets make this the default behavior. If there is a reason then lets make it a configurable option for the sticky item.

Thanks

[tinyearth]

Take a look at #213. I put links to a fork that contains a script addresses this.