錨定一個項目，以便進行垂直滾動但不是水平的

我有一個包含在類float中的div的菜單。浮子如下：錨定一個項目，以便進行垂直滾動但不是水平的

.float { 
display:block; 
position:fixed; 
top: 20px; 
left: 0px; 
z-index: 1999999999; 
} 
* html .float {position:absolute;}

以上的CSS類使得它，這樣的菜單地方留成無論用戶如何滾動（將* HTML是Internet Explorer）。但是，我需要這樣做，以便它只在用戶垂直滾動時保持原位。如果用戶向左或向右滾動，它應該從左向右移動。我似乎無法找到任何CSS來允許這一點，我遇到的任何JavaScript都在調整項目中波濤洶涌。下面的JavaScript可以工作，但如果可能的話，我希望更平滑些。我將body標籤設置爲onload =「scrolladj（）」，其中scrolladj（）寫出如下：

function scrolladj() 
{ 

    if(brow == 'Microsoft Internet Explorer') 
    { 

     o = document.documentElement.scrollLeft; 

    } 
    else 
    { 

     o = window.pageXOffset; 

    } 

    $('main_menu').style.left = (20-o)+'px'; 


}

任何想法？

來源

2010-10-03 user396404

我認爲這行爲是* *的方式CSS的電流範圍之外（可惜）。不過，它可能適用於JavaScript。 – 2010-10-03 20:32:01

是的，它會成爲一個真正的問題：/我很驚訝不完善的瀏覽器。希望有人有辦法做到這一點。 – user396404 2010-10-03 20:41:59

爲什麼你在頁面上有水平滾動？你的意思是瀏覽器窗口寬度小於網頁寬度的情況嗎？ – 2010-10-03 21:04:25

下面的代碼適用於FF和Chrome

<HTML> 
<HEAD> 
    <style> 
     .float { 
    display:block; 
    position:fixed; 
    top: 20px; 
    left: 0px; 
    z-index: 1999999999; 
    } 


    </style> 
    <script> 
    function x() 
    { 
     if(document.body.offsetLeft != document.body.scrollLeft) 
      document.getElementById('fd').style.position='absolute'; 
     else 
      document.getElementById('fd').style.position='fixed'; 
    } 
    </script> 
</HEAD> 

<BODY onscroll="x();"> 
    <div class="float" id="fd"> 
     sdkjfkljfs 
    </div> 
    <div style="overflow: auto; width: 2000px; height: 1000px" > 
    </div> 
</BODY> 
</HTML>

來源

2010-10-11 20:55:37

錨定一個項目，以便進行垂直滾動但不是水平的

回答

相關問題