sticky-footer - 创建一个滚动后出现的 div，永久保留在页面底部

Question

我正在尝试创建一个“返回顶部”图像，它需要贴在页面的右下角。

我已经用图像创建了 div，但我不知道让它永久留在页面底部的最佳方法是什么。最好使用绝对定位吗？

另外，我希望 div 仅在用户滚动超过某个点时出现，并淡入（或类似的东西？）

我在网上看过，但找不到任何我想要的东西。我试着简单地让 div 贴在底部，但我一直在使用的教程展示了如何创建页脚，而不仅仅是一个小图形，所以它也不起作用。

这方面的最佳做法是什么？任何帮助表示赞赏！

Answer 1

这个怎么样：

http://jsfiddle.net/uRN64/1

HTML

<div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>

<div style='height:1200px; background-color:orange'>Try Scrolling me</div>​

JS

$(function(){
    $(window).scroll(function() {              
      $('#log').toggle($(document).scrollTop() > 100);
    });
})
​

褪色：

改变：$('#log').toggle($(document).scrollTop() > 100);到

$(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();

Answer 2

假设你有一个 div

<div class="bottom">Your Img</div>

应用于我们fixed position希望divdiv 看起来固定的情况。

通过这样做，我们可以自由地将其移动div到我们想要的区域。

然后通过应用CSS属性right:0;，bottom:0;我们可以将 移动div到页面上最右边和最底部的位置。

HTML：

<div class="bottom"></div>

CSS：

.bottom
{
width:100px;
height:30px;
background-color:Gray;
border:1px solid black;
position:fixed;
right:0; 
bottom:0;    
}​

这是一个活生生的例子