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

我试图创建一个'回到顶部'的图像，它需要坚持到页面的右下角。创建一个在滚动后出现的div，永久保留在页面底部

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

而且，我想，当用户滚动过去的某个点的股利仅出现，淡入（或类似的东西？）

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

这是什么最佳实践？任何帮助感谢！

来源

2012-09-01 Francesca

你想的是，DIV应该在右手边，并在底端？ – freebird

是的，我想要div在右下角。 – Francesca

如何：

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>

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

淡出：

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

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

来源

2012-09-01 15:14:10 aquinas

+1获得完整答案。 – freebird

感谢这个伟大的答案:)它完美的作品。您是否有任何关于JS术语的进展？我可能会寻找一种解决方案使其“淡入”（或以更好的方式出现），以便我可以在Google上搜索解决方案？ – Francesca

我会寻找淡入:)。或者，你可以看到我的编辑答案，显示如何做到这一点。 – aquinas

让说你有一个div

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

应用fixed position到div，因为我们希望在div出现固定。

通过这样做，我们可以自由地将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;  
}

这里是一个Live Example

来源

2012-09-01 15:14:14 freebird

这是完美的谢谢你：对不起，我只是无法得到我的头。任何想法只有在页面上的特定滚动后才能进行此显示？ – Francesca

@Francesca查看aquinas的答案，他提供了滚动部分。如果您发现我的答案有帮助，请注意它。谢谢。 – freebird

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

回答

相关问题