Question

所以我想使用jquery为我的网页制作一个动画页脚。应该有一个触发动画的按钮。我找到了一个很好的例子，一切都很好，花花公子。除了按钮（包括页脚）具有使其粘贴到Web浏览器底部而不是页面底部的代码。我[i]不是[/ i]想要它，就像“滚动”页面一样，我真的希望它在我所有其他div之下。我尝试将它放在div容器中（其中包含我的所有其他div），但这似乎不起作用。

现在，（经过2.5小时的谷歌搜索）我发现它可能/可能/可能与CSS中的“绝对”定位有关，所以我尝试切换一些东西，比如给页脚的容器一个亲戚定位或给它一个“溢出：隐藏;”和剩下的一个左浮，但似乎没有什么能解决我的问题。（我本可以做错事，毕竟不是那么好用于： - /）

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

P.S。这是我使用的例子： 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像素才能使页脚正常工作，如果内容不够长，页脚将不会位于浏览器的底部。

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

http://jsfiddle.net/tc6b8/

将动画页脚放在其他div下

1 个答案: