將div的底部固定到屏幕底部（不是頁面）

如何在用戶滾動時將div的底部固定到屏幕底部？例如，如果您在網站上有左側導航，並且此導航在用戶屏幕下延伸大約200個像素，則它們將不會看到所有導航。將div的底部固定到屏幕底部（不是頁面）

當此用戶開始滾動時，通常導航功能會照常滾動。如果頁面足夠長，用戶可以通過全部導航進行滾動。我的目標是保持左側導航可見，並且無論用戶滾動多遠，都會固定在屏幕的底部。

postion：fixed;不會單獨解決這個問題，因爲用戶需要能夠滾動到導航的底部，因爲它比大多數標準監視器分辨率高。

來源

2011-03-14 Payson Welch

你可以提供一些代碼或截圖，因爲我不太清楚你想實現什麼。我敢肯定你可以用jQuery來解決這個問題。 – 2011-03-14 17:34:20

我第二個尤金，你不明白你在問什麼，是不是像粘腳？左側導航評論讓我困惑... – Trufa 2011-03-14 17:42:51

檢查本教程

http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/

這裏距離這上面的教程中的單個文件顯示的實現。隨着一點點調整，你可以實現你想要的。

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
$(function() { 
    var msie6 = $.browser == 'msie' && $.browser.version < 7; 
    if (!msie6) { 
    var top = $('#box').offset().top; 
    $(window).scroll(function (event) { 
     var y = $(this).scrollTop(); 
     if (y >= top) { $('#box').addClass('fixed'); } 
     else { $('#box').removeClass('fixed'); } 
    }); 
    } 
}); 

$(function() { 

    // Check whether browser is IE6 

    var msie6 = $.browser == 'msie' && $.browser.version < 7; 

    // Only run the following code if browser 
    // is not IE6. On IE6, the box will always 
    // scroll. 

    if (!msie6) { 

    // Set the 'top' variable. The following 
    // code calculates the initial position of 
    // the box. 

    var top = $('#box').offset().top; 

    // Next, we use jQuery's scroll function 
    // to monitor the page as we scroll through. 

    $(window).scroll(function (event) { 

     // In the following line, we set 'y' to 
     // be the amount of pixels scrolled 
     // from the top. 

     var y = $(this).scrollTop(); 

     // Have you scrolled beyond the 
     // box? If so, we need to set the box 
     // to fixed. 

     if (y >= top) { 

     // Set the box to the 'fixed' class. 

     $('#box').addClass('fixed'); 

     } else { 

     // Remove the 'fixed' class 

     $('#box').removeClass('fixed'); 
     } 
    }); 
    } 
}); 
</script> 
<style type="text/css"> 
.main 
{ 
margin-left:auto; 
margin-right:auto; 
height:2000px; 
width:800px; 
background-color:lightblue; 
} 
#box { 
background-color:green; 
    position: absolute; 
    top: 50px; 
    left: 50%; 
    width: 200px; 
    margin-left: -500px; 
height:500px; 
} 
#box.fixed { 
    position: fixed; 
} 
</style> 
</head> 
<body> 
<div id="box"> 
<p>Hello World</p> 
</div> 
<div class="main"> 
This is main page and here is scrollable content. 
</div> 
</body> 
</html>

來源

2011-03-14 18:25:42 Mitul

謝謝！是的，我將不得不修改它，但這會做到這一點。 – 2011-03-14 23:16:38

將div的底部固定到屏幕底部（不是頁面）

回答

相關問題