滾動固定位置 <div> 水平地

Question

我正在使用固定在屏幕頂部的<div> 。 該div包含一個菜單。 該頁面的其余部分可以垂直和水平滾動。

如果用戶的顯示屏較小，盡管可以水平滾動，但他無法到達菜單中的所有項目。 如果我使用overflow-x ，則<div>將獲得其自己的滾動條，看起來不太好。 我希望該頁面和菜單共享主水平滾動條。

注意：就我而言，頁面的寬度始終與菜單相同。

https://jsfiddle.net/8gL16o28/

---

的HTML

<div id="menu">
    <img src="http://www.widescreen-wallpapers.de/wallpapers/502-sonnenuntergang-1.jpg" height="50" width="3000" />
</div>

<img src="http://i156.photobucket.com/albums/t40/solvaenda/mein1Blumenbild.jpg" height="3000" width="3000" />

的CSS

#menu {
    position:fixed;
    top:0px;
    left:0px;
    height:50px
}
body {
    margin-top:50px;
}

Answer 1

使用位置：絕對。

#menu {
    position:absolute;
    top:0px;
    left:0px;
    height:50px
}

https://jsfiddle.net/8gL16o28/2/

JS更正：

$(document).ready(function(){
    $(window ).scroll(function(){
        $("#container").css("top",$("body").scrollTop()) 
    });
});

https://jsfiddle.net/8gL16o28/3/

Answer 2

我會向BODY標簽添加一個onscroll事件。 菜單div具有隱藏的溢出。 然后在onscroll函數中檢查頁面的滾動位置：

left = window.pageXOffset || document.documentElement.scrollLeft;

然后，您可以適當地設置div的scrollLeft屬性。