1

这就是我想要做的：

我想创建一个无论屏幕大小如何都贴在用户屏幕底部的页脚。但是当用户滚动时，我希望能够在用户向下滚动时将标题从固定更改为作为页面的一部分向下移动。我是 JS 新手，但我尝试过一些事情，例如：

 $(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function (e) {

                var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail * -1;
                if (theEvent / 120 > 0) {
                    if ($(window).scrollTop() == 0) {
                        $("#content_under_fixed_footer").hide();
                    }
                }
                else {
                    if ($(window).scrollTop() < $(document).height() - $(window).height()) {
                        $("#content_under_fixed_footer").fadeIn(2000);
                        $(".fixed_header").css("position", "relative");
                    }
                }
            });

如果我使用上面的脚本，触发器是不对的。如果用户有一个大屏幕，则没有滚动，但如果窗口被缩短，它相对运作良好。请帮助我今天需要提交这个，我会尝试任何解决方案。谢谢！

4

4 回答 4

1

Important: height of footer, padding below content, margin 0 for html and body

Copy and paste the content inside the content to make it longer than height of window

HTML

<div class="wrapper">
    <div class="header">HEADER</div>
    <div class="content">
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
    </div>
</div>
<div class="footer">FOOTER</div>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.wrapper {
    min-height: 100%;
}

.content {
    padding-bottom: 50px;
}

.footer {
    height: 50px;
    background: #f00;
    margin-top: -50px;
}

jsFiddle: http://jsfiddle.net/8QrGm/

于 2013-07-10T16:52:09.563 回答
1

你的意思是这样的？( jsFiddle )

HTML

<div id="content"></div>
<div id="wrapper">
    <footer>Something</footer>
</div>

CSS

body
{
    margin: 0;
}

#content
{
    position: absolute;
    height: 1000px;
    background-color: red;
    width: 300px;
}

#wrapper
{
    position: absolute;
    height: 100%;
}

footer
{
    position: absolute;
    bottom: 0px;
    width: 300px;
    text-align: center;
    background-color: darkred;
}
于 2013-07-10T16:46:20.337 回答
1

看看这个：

<html><head><title>Test</title> 
<script type="text/javascript">
alert(screen.width + "x" + screen.height);
</script>
</head><body>
</body>
</html>

这样你就可以直接使用 screen.width 和 screen.height ，并以此计算一切。

于 2013-07-10T14:14:08.737 回答
1

HTML：

<div class='footer'>
footer
</div>

风格：

.footer {
    position: fixed;
    bottom: 0;
}

查询：

$(window).scroll(function(){
if($(window).scrollTop('0'){
} else {
   $('.footer').css('position', 'relative');
}
});

这应该工作

于 2013-07-10T14:27:33.770 回答