html - 水平滚动固定位置的 <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

然后使用 position:absolute。

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