I'm looking to make a child div stick to the bottom when the parent div reaches the bottom of the browser window.
Note: This behavior should only occur when the parent div is pushed down, not when the page is scrolled down.
For instance, in my demonstration there's a hidden content panel. When you click on the expand link, the expanded content pushes the bottom_content div to the bottom.
While an accordion is used as an example here, it could be any other element pushing the bottom_content div down. I don't want the sticky functionality tied specifically to the accordion.
The child div should only stick to the bottom when it touches the bottom of the browser window and when there isn't much content on the page, it should remain positioned like a child of the bottom_content.
Parent div: bottom_content
Child div: footer
This is the current code being used, but it's not ideal:
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});