javascript - 将动画页脚放在其他 div 下

Question

所以我想使用 jquery 为我的网页制作动画页脚。应该有一个按钮可以触发动画。我为这一切找到了一个很好的例子，一切都很好，花花公子。除了按钮(包括页脚)有这段代码使它粘在你的网络浏览器的底部，而不是页面的底部。我确实 [i] 不 [/i] 想要它与页面一起“滚动”，我真的希望它位于我所有其他 div 的下方。我试着把它放在 div 容器中(里面也有我所有的其他 div)，但这似乎不起作用。

现在，(经过 2.5 小时的谷歌搜索后)我发现它可能/可能/可能与 CSS 中的“绝对”定位有关，所以我尝试改变一些东西，比如给页脚的容器一个相对的位置或给它一个“溢出:隐藏；”与其余的一起左浮动但似乎没有解决我的问题。 (我可能做错了什么，毕竟 CSS 不是那么好:-/)

我希望有人能够/愿意提供帮助。

附言这是我使用的示例: http://return-true.com/2010/04/jquery-pop-up-footer-version-2/

代码如下:

Javascript:

    jQuery(function($) {
        var open = false;
        $('#footerSlideButton').click(function () {
            if(open === false) {
                $('#footerSlideContent').animate({ height: '300px' });
                $(this).css('backgroundPosition', 'bottom left');
                open = true;
            } else {
                $('#footerSlideContent').animate({ height: '0px' });
                $(this).css('backgroundPosition', 'top left');
                open = false;
            }
        }); 
    });

HTML:

<div id="footerPlacement">
    <div id="footerSlideContainer">
        <div id="footerSlideButton"></div>
            <div id="footerSlideContent">
            <div id="footerSlideText">
                <h3>Hey! I'm a Sliding Footer</h3>
                    <p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
                    <p>What can you use me for? Well look at all this stuff:</p>
                    <ul>
                        <li>Sales information</li>
                        <li>Important updates</li>
                        <li>Unobtrusive about panel</li>
                        <li>Or just a good ol' footer</li>
                    </ul>
                    <p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
            </div>
        </div>
    </div>
</div>

CSS:

#footerPlacement {
    margin-bottom: 0px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#footerSlideContainer {
    position: fixed;
    margin-left: 0px;
    bottom:0px;
    width: 1000px;
}
#footerSlideButton {
    background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
    position: absolute;
    top: -55px;
    right: 20px;
    width:50px;
    height:50px;
    border: none;
    cursor: pointer;
}
#footerSlideContent {
    width: 100%;
    height: 10px;
    background: #251b15;
    color: #CCCCCC;
    font-size: 0.8em;
    border: none;
    font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
    padding: 15px 10px 25px 25px;
}

提前致谢!

Answer 1

如果您将 #footerPlacement 更改为包含 position:relative，则可以将 #footerSlideContainer 更改为 position:absolute 然后您的页脚将位于其上方的任何内容下方。

但是，您需要将内容的最小高度设置为 350 像素左右，页脚才能正常工作，如果您的内容不够长，页脚将不会位于浏览器底部。

我还在 #footerSlideContent 中添加了 overflow:hidden。我做了一个 fiddle 来演示:

http://jsfiddle.net/tc6b8/