bottom space limit

[acegilz]

how can I prevent sticky element to scroll down until it reaches the footer? I would like to limit it to the < row> zone!

[acegilz]

I have seen this being requested numerous times but without a proper solution: Example: https://github.com/garand/sticky/pull/182

[Jawanet]

I also looking this solution mate. The developers not active

[acegilz]

@Jawanet give up on this.

http://leafo.net/sticky-kit/

I'll also save you a couple hours with this:

$("#slider").stick_in_parent({offset_top:20}).on('sticky_kit:bottom',` function(e) {$(this).parent().css('position','static');}).on('sticky_kit:unbottom', function(e) {$(this).parent().css('position', 'relative')});

Good work!

[Jawanet]

Tanks for replay

Main cms use this jquery stick, i not have option to use another mate.

[Yasp0]

Too bad http://leafo.net/sticky-kit/ does not work well on the iPad: https://github.com/leafo/sticky-kit/issues/166

[okaysuper]

@Yasp0 I replaced sticky kit on iOS with the css sticky position, it works really well You can detect cssstickyposition with Modernizr then enable sticky kit only if it returns false

[naja7host]

@Jawanet i think you are refering to Blesta and blesta Cms, may you will be interested this link
https://requests.blesta.com/topic/ajaxwizard-boxes-summary-details-sticky

[naffiq]

So I actually made this lib behave this way with this code (consider $('.menu__body') as parent element and $('.menu__item .submenu .grid') as sticky one:

// Evaluating document height
var body = document.body,
    html = document.documentElement;

var documentHeight = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

// Evaluating parent document height
var menuBody = $('.menu__body');
var menuHeight = menuBody.position().top + menuBody.outerHeight(true);

// Sticky initialization
$('.menu__item .submenu .grid').sticky({
    topSpacing: 28, // just a padding, nevermind
    bottomSpacing: documentHeight - menuHeight // sticky will stop right where we need

});

I've attached demo below: