当父 div 触摸浏览器底部时，将子项粘贴到底部答案

【问题标题】：stick child to bottom when parent div touches the browser bottom当父 div 触摸浏览器底部时，将子项粘贴到底部
【发布时间】：2014-09-16 11:05:30
【问题描述】：

当父 div 触及浏览器底部时，我想将子 div 粘贴到底部。

PS：这应该发生在父 div 被按下而不是向下滚动时。

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

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

只有当bottom_content div 触及浏览器底部并且页面中没有太多内容时，它才应该保持向下，然后子 div 应该像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

【问题讨论】：

this fiddle 有想要的行为吗？
没有。它冻结了滚动上的 div。但我不需要这个滚动。
和updated fiddle 处理窗口大小调整。
footer 的小提琴位置不仅在滚动时发生变化，而且在列表打开后也会发生变化。
@Regent 你的回答很完美。：）谢谢！！您可以在答案部分添加相同的内容。

标签： javascript jquery html css

【解决方案1】：

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

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

编辑。 Updated fiddle 列表打开后没有奇怪的页脚跳转。

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

【讨论】：

+1，是否可以更改此设置以在页脚到达视口边缘时修复页脚（防止它越过它）。目前有一个延迟，因为当内容完成扩展时，页脚是固定的。
@misterManSam，是的，它看起来很奇怪。 Updated fiddle 看起来更好，不是吗？
好东西。把它放在一个可运行的堆栈 sn-p 中！ :D

【解决方案2】：

你可以让 js on.change 将该 div 的位置更改为绝对和底部：0 左：0

【讨论】：