Question

我有一个jQuery滑动页脚...现在我希望它在顶部滑动（Header）。任何人都可以帮我修理它！

对于现场演示：http://data.gaixinh.cto.vn/cbsp/bot.html

此HTML来源：

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>jQuery Sliding Footer Example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/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;
            }
        });     
    });
</script>

<style type="text/css">
@font-face {
    font-family: 'DejaVuSansBook';
    src: url('DejaVuSans-webfont.eot');
    src: url('DejaVuSans-webfont.eot?#iefix') format('eot'),
         url('DejaVuSans-webfont.woff') format('woff'),
         url('DejaVuSans-webfont.ttf') format('truetype'),
         url('DejaVuSans-webfont.svg#webfontS7fnJSPW') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    margin:0;
    padding:0;
    background: #EFEFEF;
}
#footerSlideContainer {
    position: fixed;
    bottom:0;
    width: 100%;
}
#footerSlideButton {
    background: url('http://data.gaixinh.cto.vn/cbsp/sliderButton.png') top left no-repeat transparent;
    position: absolute;
    top: -55px;
    right: 20px;
    width:50px;
    height:50px;
    border: none;
    cursor: pointer;
}
#footerSlideContent {
    width: 100%;
    height: 0px;
    background: #251b15;
    color: #CCCCCC;
    font-size: 0.8em;
    border: none;
    font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideContent h3 {
    font-size: 36px;
    color: #9AC941;
    margin: 10px 0 10px 0;
}
#footerSlideContent ul {
    color: #EE8D40;
    list-style-type: none;
    line-height: 2em;
}
#footerSlideText {
    padding: 15px 10px 25px 25px;
}
#lookHere {
    font-family: DejaVuSansBook, Sans-Serif;
}
#lookHere h1, #lookHere h2 {
    font-size: 15em;
    padding: 0;
    margin: 0;
    color: #AAAAAA;
}
#lookHere h2 {
    font-size: 1.5em;
    margin: 0 0 0 30px;
}
#lookHere span.orange {
    color: #EE8D40;
}
#lookHere span.green {
    color: #9AC941;
}
</style>

</head>

<body>
<div id="lookHere">
<h1>Help me!</h1>
<h2>I need it Sliding change to Top (Header) <span class="orange">Look</span> to the <span class="green">bottom right</span>.</h2>
</div>
<div id="footerSlideContainer">
    <div id="footerSlideButton"></div>
    <div id="footerSlideContent">
        <div id="footerSlideText">
            <h3>Hey! Help me pls</h3>
        </div>
    </div>
</div>

</body>
</html>

这是我的HTML源码，我不知道任何解决方法。请帮助我的人！

Answer 1

将#footerSlideButton样式top: -55px;更改为bottom: -55px;。
将#footerSlideContainer样式bottom:0;更改为top:0;

Answer 2

试试这个

#footerSlideContainer {
position: absolute;
bottom:469px;
width: 100%;
margin-top:0px;
left: -40px;
}

jQuery滑动底部变为顶部？

2 个答案: