garand / sticky

jQuery Plugin for Sticky Objects
Other
3.3k stars 1.06k forks source link

bottom space limit #235

Open acegilz opened 8 years ago

acegilz commented 8 years ago

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 commented 8 years ago

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

Jawanet commented 7 years ago

I also looking this solution mate. The developers not active

acegilz commented 7 years ago

@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 commented 7 years ago

Tanks for replay

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

Yasp0 commented 7 years ago

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

okaysuper commented 7 years ago

@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 commented 7 years ago

@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 commented 6 years ago

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:

kapture 2017-11-07 at 23 44 07