創建一個在滾動後出現的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，永久保留在頁面底部

回答

相關問題