将 div 粘贴到右下角，但始终在页脚上方答案

【问题标题】：Stick div to bottom right corner, but above footer at all time将 div 粘贴到右下角，但始终在页脚上方
【发布时间】：2012-09-24 19:11:49
【问题描述】：

我想要一个小 div 贴在浏览器的右下角。这是我通过这样做完成的：

#div {
position: fixed;
bottom: 10px;
right: 10px;
}

但我有一个页脚，比如高度：200px;。我想要的是，当你向下滚动页面时，div 停留在右下角，但是当页脚在页面底部弹出时，我希望页脚将其向上推，这样它就不会出现在前面页脚。

我希望我说清楚了......

【问题讨论】：

你需要 JavaScript。
看看这个css-tricks.com/snippets/jquery/jquery-sticky-footer
在 StackOverflow 上已经被问过很多次了。我记得回答过一次……

标签： css html positioning

【解决方案1】：

我花了一段时间，但我想我已经为你找到了答案:)

您应该通过在添加 css 文件的行下方添加这一行来将 JQuery 添加到 HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

然后创建一个文件 scrollBottom.js（javascript 文件），并像这样添加它：

<script src="scrollBottom.js" type="text/javascript"></script>

在该文件中添加以下代码（已编辑：应该添加 document.ready）：

$(document).ready(function() {

    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height()-200) {
           $('#div').css('bottom', $(window).scrollTop()-2360);
       }
        else
        {
            $('#div').css('bottom', '10px');
        }
    });
});

工作示例： http://jsfiddle.net/4VJtU/4/

【讨论】：

【解决方案2】：

喜欢现在不用 jscripting 也能做到这一点。 :) 只需几行 CSS 和一些包装器调整： http://jsfiddle.net/bitofgrace/QGEUv/

<div id="wrapper">
<div id="flyover">hi</div> <!-- the content you want to stick in the corner -->
<div class="content"> Body of page content</div>

<div ID="footer"> FOOTER CONTENT</div>
</div> <!-- close wrapper -->

CSS

#wrapper {width:100%; height:100%; margin:0}
#flyover {background-color:pink; color:white; position:fixed; top: 87.5%; z-index:4;}
#footer {background:green; position:relative; height:100px; width:100%; bottom:0; z-index:1;}

【讨论】：