如何創建固定在屏幕底部的頁腳，但當用戶向下滾動時，它不再是固定頁腳？

Question

這就是我想要做的：

無論屏幕大小如何，我都希望創建一個貼在用戶屏幕底部的頁腳。 但是當用戶滾動時，我希望能夠在用戶向下滾動時將標題從固定更改為向下作為頁面的一部分。 我是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");
                    }
                }
            });

如果我使用上面的腳本，則觸發器不正確。 如果用戶有一個大屏幕沒有滾動，但如果窗口縮短，它相對運行良好。 請幫助我今天提交這個，我會嘗試任何解決方案。 謝謝！

Answer 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，並根據它計算一切。

Answer 2

HTML：

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

樣式：

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

jQuery的：

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

這應該工作

Answer 3

你的意思是這樣的？ （ 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;
}

Answer 4

重要：頁腳高度，內容下方填充，html和正文邊距為0

復制並粘貼內容中的內容使其長於窗口高度

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/

如何創建固定在屏幕底部的頁腳，但當用戶向下滾動時，它不再是固定頁腳？

問題描述

4 個解決方案

解決方案1
1 2013-07-10 14:14:08

解決方案2
1

解決方案3
1 2013-07-10 16:46:20

解決方案4
1 2013-07-10 16:52:09

如何創建固定在屏幕底部的頁腳，但當用戶向下滾動時，它不再是固定頁腳？

問題描述

4 個解決方案

解決方案1 1 2013-07-10 14:14:08

解決方案2 1

解決方案3 1 2013-07-10 16:46:20

解決方案4 1 2013-07-10 16:52:09

解決方案1
1 2013-07-10 14:14:08

解決方案2
1

解決方案3
1 2013-07-10 16:46:20

解決方案4
1 2013-07-10 16:52:09