当父div触摸浏览器底部时，将孩子固定在底部

Question

I want to stick child div to bottom when parent div touches the browser bottom.

PS : This should happen when the parent div is pushed down not when scrolled down.

For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content (which is pushing the bottom_content div to the bottom).

But accordion is just an example, there will be some other element which will be pushing the bottom_content div down. So I dont want to write stick function with reference to accordion.

It should stick down only when bottom_content div touches the bottom of the browser and when there is no much content in the page then the child div should stay as it is like child of the bottom_content

Parent div: bottom_content
Child div: footer

Here is my code currently used, which is not proper

$('.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%' });

        }
    });

DEMO

Answer 1

The whole idea is to handle .footer position on window scrolling, on window resizing and after .slideToggle() for the list is completed:

Fiddle .

var stickyHeaderbottom = $('.footer').offset().top;

$('.expandble_conetnt a').click(function()
{
    $(this).next('span').slideToggle(function()
    {
        handleBottom();
    });
    return false;
}); 

$(window).scroll(function()
{
    handleBottom();
});

$(window).resize(function()
{
    handleBottom();
});

function handleBottom()
{
    if ($(window).height() + $(window).scrollTop() < $(document).height())
    {
        $('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
    }
    else
    {
        $('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
    }
}

Edit . Updated fiddle without weird footer jumping after list opening.

var stickyHeaderbottom = $('.footer').offset().top;

$('.expandble_conetnt a').click(function()
{
    var toggledElement = $(this).next('span');
    handleBottom(toggledElement.height());
    toggledElement.slideToggle(function()
    {
        handleBottom();
    });
    return false;
}); 

$(window).scroll(function()
{
    handleBottom();
});

$(window).resize(function()
{
    handleBottom();
});

function handleBottom(additionalHeight)
{
    var pageHeight = $(document).height();
    if (additionalHeight)
    {
        pageHeight += additionalHeight;
    }
    if ($(window).height() + $(window).scrollTop() < pageHeight)
    {
        $('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
    }
    else
    {
        $('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
    }
}

Answer 2

您可以使js on.change将div位置更改为绝对位置，并且将bottom更改为left：0 left：0