Sticky-div disappears when reaching bottom of page
Opened this issue ยท 8 comments
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
Try adding spacer: false
to options.
Example:
$('#your_element').stick_in_parent({spacer: false});
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');
})
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/
This is it!
Should be highlighted on the documentation:
@jeffrainey works like a charm
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');
})