Sticky-div disappears when reaching bottom of page

[TThrane]

Hi...

I'm using Sticky-Kit on this testpage: http://kulisse.thrane.nu/program My issue is that when I reach the bottom of the page by scrolling, the sticky-div just disappears. It shows up again when I scroll up a bit.

Any clues on how to fix this?

Regards Thomas

[gefangenimnetz]

Try adding spacer: false to options.

Example: $('#your_element').stick_in_parent({spacer: false});

[TThrane]

Thanks, but no luck - the sidebar floatet left with that.

Found a solution - added this to the script:

$('.t3-sidebar,.t3-content') .on('sticky_kit:bottom', function(e) { $(this).parent().css('position', 'static'); }) .on('sticky_kit:unbottom', function(e) { $(this).parent().css('position', 'relative'); })

[jeffrainey]

I actually found that setting it back to relative can cause problems if the user scrolls to the bottom, then up a little and then back down. So, I just used the first part of the code @TThrane provided to leave the position of the parent div static.

$('.div1,.div2') .on('sticky_kit:bottom', function(e) { $(this).parent().css('position', 'static'); })

Is there a reason this parent div ever needs to be inline styled with relative position in the first place? Nice plugin BTW.

reference: http://fundingsage2.staging.wpengine.com/business-startup-spotlight-designdodo/

[acegilz]

This is it! Should be highlighted on the documentation:

https://github.com/leafo/sticky-kit/issues/180#issuecomment-238280855

[hadley]

Duplicate of #31

[azharisubroto]

@jeffrainey works like a charm

[dskvr]

@TThrane deserves bitcoin

[crisinmotion]

I think it somehow happens primarily if you chose to stick it to non-direct parent element and subsequent parents have position:relative;

This is how I solved it based also from above comments, I just set all other parents except my target parent to static.

$(el).stick_in_parent({
    sticky_class: 'is_stucked',
    parent: '.your-custom-non-direct-parent',
    bottoming: true,
    inner_scrolling: false,
    spacer: false,
}).on('sticky_kit:bottom', function(e) {
    $(this).parentsUntil('.your-custom-non-direct-parent').css('position', 'static');
}).on('sticky_kit:unbottom', function(e) {
    $(this).parentsUntil('.your-custom-non-direct-parent').css('position', 'relative');
})