1

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

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

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

PS这是我使用的示例： 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;
}

提前致谢！

4

1 回答 1

2

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

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

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

http://jsfiddle.net/tc6b8/

于 2013-02-28T09:34:35.073 回答