sticky-kit Is there a way to bottom out the sticky element at n pixels?

I have need for a offset_bottom type of option. Does one exist or is there some way to accomplish this without having to rewrite the plugin?

For example, I need the bottoming out to happen at 70px from the bottom of the parent element. and for it to stay at that position, relative to the parent as I continue to scroll down the page.

Apr 26 '16 14:04 benlwilliams

+1

Aug 30 '16 10:08 rahulv3a

+1

I also need offset_bottom option. I need to bottom out the element 100px "before" the parent element is scrolled out.

Nov 26 '16 13:11 daxhns

I know this is old but I was looking for the same thing, and I've managed to work around this lack of bottom offset by adding some margin/padding at the bottom of the sticky element.

edit: forget it, it doesnt work. It's a shame the developer doesn't care anymore, it was good until it lasted :(

Mar 31 '17 16:03 solid-pixel

I am looking for exactly this!

Dec 27 '17 18:12 iamtekeste

I just found this MR but it looks like it is not going to be merged in any time soon. https://github.com/leafo/sticky-kit/pull/62

Dec 27 '17 19:12 iamtekeste

+1. doesn't seem like the project is still maintained though

Mar 27 '18 12:03 dwoznicka

Assuming a structure like this:

<div class="sticky-title">
	
    <h4>Title</h4>
    <p>Subtitle</p>

</div>

Just create a pseudo element after the p:

p:after {
    content: '';
    display: block;
    height: 100px; /** this is your bottom offset **/
}

This hack allows for a bottom offset of 100px.

Jun 03 '19 13:06 alessandro-newzoo

To bottom out at n pixel i think you need to set your parent scroll track element height to that much pixels, and then call the stick_in_parent API on that parent sticky-kit bottom out n pixels

I had the issue with sticky container kept on scrolling till and not bottom out at all, its then when i recognised that the parent height was same as the sticky container to be scrolled. I set height of the parent container as long as the length of the track and calling sticky it API with parent it worked.

$('.sticky-right').stick_in_parent({ offset_top: 82, parent: ".product-main_content", recalc_every: 1 });

Without setting my parent track height, calling the API my sticky container was added with .is_stuck as position: absolute; height: auto;

which shouldn`t be the case. When track height is set correctly it will be added with styles as position: fixed; height: {offset_top used in API call};

Feb 19 '21 05:02 fiazmr2

Hi, Based on the above answers this library is not going to get updated. So I want to share my simple trick that worked for me:

We want to add some margin to the bottom of the sidebar that is sticky... Instead of working on the existing elements or the library options there is another way. The library works for any

so we just need to add a little more height to the div but by a hidden element. For example I added a new

with the height of 20px as the last child of the side bar. To clear out, the code looks like something like this:

<div class="sidebar">
    <div> .... </div>
    <some other element> ... </>
    <div class="space"></div>
</div>

and

.space {
    height: 20px;
}

so the sticky-kit library wants to make it scrollable and sticky so some space appears on the bottom looking like some margin.

Well... That works for me :)

It is a very simple solution. But I hope it was helpful.

Aug 19 '21 22:08 hadiMh

sticky-kit sticky-kit copied to clipboard

Is there a way to bottom out the sticky element at n pixels?

sticky-kit
sticky-kit copied to clipboard