sticky-kit

sticky-kit copied to clipboard

Hi,

I want my stuck element to appear at the bottom of the page. I looked through the issues and a suggestion was made to modify the CSS for the .is_stuck class as follows...

.is_stuck {
    top: auto !important;
    bottom: 0;
}

The element sticks at the right point in the scroll and because of the CSS change it appears at the bottom of my screen.

However now the stuck element doesn't bottom out / unstick at the right position - the user scrolls past the bottom of the parent until the top of the window passes the bottom of the parent, at which point the element unsticks.

Any suggestions?

@stebag I was trying to do something similar with this plugin and I'm afraid right now it just isn't built with stuff being stuck to the bottom in mind. :-1:

I would also like an option to set an element to stick to the bottom of the viewport. For example Google inbox has a similar feature when you open a mail the reply section sticks to the bottom. Can something like that be done or it needs to be implemented ?

Hey guys, this is how I solved the problem using offset_top (using jQuery):

$(".stick-to-top").stick_in_parent();
$(".stick-to-bottom").each(function() {
	var offsetHeight = $(window).height()-$(this).height();
	$(this).stick_in_parent({offset_top: offsetHeight});
});

If you want it to be updated on screen resize wrap the above within:

$(window).resize(function(){
        //code above
});

+1