將div粘貼到右下角，但始終在頁腳之上

Question

我想要一個小格子粘貼到瀏覽器的右下角。這我做到這一點：

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

但我有一個頁腳，說高度：200px ;.我想要的是，當您向下滾動頁面時，div停留在右下角，但當頁面底部彈出頁腳時，我希望頁腳向上推，以便它不會出現在頁面的前面頁腳。

我希望我自己清楚......

Answer 1

我花了一段時間，但我想我得到了你的答案:)

你應該加入這一行添加了jQuery的HTML，在您添加CSS文件的線下：

<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/

Answer 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;}