将动画页脚放在其他 div 下答案

【问题标题】：Place animated footer under other divs将动画页脚放在其他 div 下
【发布时间】：2013-02-14 09:24:14
【问题描述】：

所以我想使用 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;
}

提前致谢！

【问题讨论】：

您是否厌倦了将#footerSlideContainer {position: fixed;} 更改为position:static？？
哦，现在我看到了你的解决方案。等等，让我看看
好的，所以它将页脚（就像单击按钮一样完全打开）放在所有其他 div 下方，并且按钮从页面上完全消失。
好的，尝试将height:0px 添加到#footerSlideContainer，希望对您有所帮助。基本上，您将不得不使用#footerSlideContainer 的position、margin 和height。为 mozilla firefox 安装 Firebug 也将帮助您解决该问题。
好的，所以我将位置再次设置为相对，同时增加边距和高度。 Position relative 确实将它放在页面底部，但它破坏了动画，有点，因为动画发生在按钮下方，并且按钮不会向上移动，所以它基本上发生在屏幕外。（我通过增加边距注意到了这一点）。增加边距会将其放置在我不希望的位置，并且更改高度不是一个好主意，因为它决定了页脚的高度，所以如果我将其设置为 0，它将不会显示在全部。如果我将它设置为 100，它会显示标题的顶部 100px。

标签： javascript html css jquery-animate footer

【解决方案1】：

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

但是，您需要使内容的最小高度约为 350 像素，以便页脚正常工作，如果您的内容不够长，页脚将不会位于浏览器底部。

我还将overflow:hidden 添加到#footerSlideContent。我做了一个小提琴来演示：

http://jsfiddle.net/tc6b8/

【讨论】：