如果窗口太小，滾動到一個固定的分區

我有一個只用css和html編碼的菜單欄，它固定在頂部，但是當屏幕被調整大小，並且您嘗試在x軸上滾動頁面時，軸停留在左上角，您可以滾動瀏覽小窗口，但無法滾動頁面。如果窗口太小，滾動到一個固定的分區

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <link rel="stylesheet" href="StyleSheets/StyleSheet.css" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>TeraShare</title> 
     <script type="text/javascript" src="JQuery/JQuery.js"></script> 
     <script type="text/javascript" src="Scripts/JavaScript.js"></script> 
    </head> 

    <body> 
     <div id="Wrapper"> 
      <div id="Menu"> 
       <div id="Logo"><a href=""><img src="Pictures/Logo.png" /></a></div> 
       <div id="Buttons"> 
        <a href="LogIn/"><div class="Button" title="LogIn">LogIn</div></a> 
        <a href="Register/"><div class="Button" title="Register">Register</div></a> 
        <div class="Button" title="Menu">Menu&nbsp;<span class="Triangle"></span></div> 
       </div> 
      </div> 
      <div id="Content"> 
       <div id="Fix"></div> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

#Menu 
{ 
    position:fixed; 
    top:0px; 
    width:100%; 
    min-width:965px; 
    height:49px; 
    border-bottom:rgba(82,82,82,1); 
    box-shadow:0 2px 3px rgba(182, 182, 182, 0.75); 
    background-color:rgb(68, 68, 68); 
    z-index:100;  
}

來源

2013-02-17 Moussa Harajli

，你能否告訴我們在實踐中 – 2013-02-17 15:05:09

我也許可以做一個jdFiddle我不知道，如果你要去能夠滾動。 – 2013-02-17 15:06:07

http://jsfiddle.net/ebeBw/ – 2013-02-17 15:09:31

改變固定股利任何窗口的scrollLeft價值是當它滾動的left。

$(window).on('scroll', function() { 
    $("#Menu").css('left', '-' + $(this).scrollLeft() + 'px'); 
});

http://jsfiddle.net/ebeBw/1/

來源

2013-02-17 20:45:04

工作！非常感謝！ – 2013-02-17 20:52:39

如果窗口太小，滾動到一個固定的分區

回答

相關問題