将页脚放在页面底部

Question

当父div到达浏览器底部时，我需要冻结页脚面板。

我试过的是在滚动页面时使其冻结，但在父级div到达浏览器底部时需要它。

例如，在我的演示中，有一个隐藏的内容面板。 如果单击展开链接，则会看到展开的内容。

当此内容扩展时， bottom_content div会移至底部，一旦将bottom_content向下推，我就需要其中的footer div固定在底部。

这是我目前使用的代码

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

**希望这是您要实现的目标... 演示

$('.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:0, width: '95%', left: '2.5%' });
        } else {
            $('.footer').css({ position: 'static', bottom: $('.expandble_conetnt').offset().top, width: '100%' });

        }
    });