Question

当父div触及浏览器底部时，我想将子div保持在底部。

P.S：当父div被推下而不是向下滚动时，会发生这种情况。

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

但是手风琴只是一个例子，还有一些其他因素会推动bottom_content div。所以我不想参考手风琴来写棒功能。

只有当bottom_content div触及浏览器的底部并且页面中没有太多内容时它才应该停留，那么子div应该像bottom_content <的孩子一样保持不变/ p>

父母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()位置，以完成列表：

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

Answer 2

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

当父div触及浏览器底部时，将孩子粘到底部

2 个答案: