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

Question

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

PS：应该在将父div向下推时而不是向下滚动时发生。

例如，在我的演示中，有一个隐藏的内容面板。 如果单击扩展链接，您将看到扩展内容（将bottom_content div推到底部）。

但是手风琴只是一个例子，还会有其他一些因素会降低bottom_content div。 所以我不想参考手风琴编写stick函数。

仅当bottom_content div接触到浏览器底部并且页面中没有太多内容时，它才应停留在该位置，则子div应该保持bottom_content就像bottom_content子bottom_content

父级div： bottom_content
儿童div： footer

这是我目前使用的代码，不合适

$('.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

整个想法是处理.footer上位置window滚动，在window大小调整后.slideToggle()为列表完成：

小提琴 。

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 });
    }
}

编辑 。 更新小提琴 ，打开列表后没有奇怪的页脚跳动。

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