jQuery从底部向上滑动，无法让上面的内容不重叠

Question

当我单击切换 按钮时，我希望#upper 从底部向上 滑动。但是，我无法让 #lower 停留在底部并且 #upper 的内容不会与其重叠。我该如何解决这个问题？

JS fiddle :http://jsfiddle.net/4k6du/136/

有问题的页面:http://keebs.com/sandbox

HTML

<div id="upper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
</div>

<div id="lower">
    <div id="toggle-div">
    <a href="#" id="toggle">button</a>
    </div>

    <div id="panel">
        <p>Panel - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
    </div>
    <div id="copyright">
        copyright info
    </div>
</div>

CSS

#upper {
    position: relative;
}

#lower {
    width: 90%;
    position: absolute;
    bottom: 0;
}

#toggle-div {
    padding: 10px;
    background:#666;
}

#panel {
    display: none;
/*    height: 100px;*/
    background-color: #aaaaaa;
    padding: 10px;
}
#copyright {
    width:100%;
    background:#222;
    height:40px;
}

JS

$("#toggle").click(function() {
    if ($('#panel').css('display') == 'block') {
        var height = '-=' + $('#panel').height();
    } else {
        var height = '+=' + $('#panel').height();
    }
    $("#panel").slideToggle("slow");
    $("#upper").animate({
        bottom: height
    }, "slow")
});

Answer 1

此处的主要目的是让用户知道已显示新内容。虽然可以按照您想要的方式实现这一点，但我建议您尝试一些更简单的方法，例如:

http://jsfiddle.net/mDBbE/2/

$('#toggle').click(function(e) {
    e.preventDefault();
    var $el = $('.slide-container');
    if($el.is(':visible'))
    {
        $el.slideUp(300);
    } else {
        $el.slideDown(300);
        scrollToContent($el);
    }
});

function scrollToContent($el) {
    $('html, body').animate({ scrollTop: $el.offset().top }, 600);
}