Question

我正在使用固定在屏幕顶部的<div>。这个div包含一个菜单。页面的其余部分可以垂直和水平滚动。

如果用户的显示器很小，他无法访问菜单中的所有项目，尽管他可以水平滚动。如果我使用overflow-x，<div>将获得自己的滚动条，这看起来不太好。我希望该页面和菜单共享主水平滚动条。

注意：在我的情况下，页面的宽度始终与菜单的大小相同。

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 then。

#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

我会将一个onscroll事件添加到BODY标记中。菜单div有隐藏溢出。然后在onscroll函数中检查页面的滚动位置：

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

然后你可以适当地设置div的scrollLeft属性。

滚动固定定位<div>水平

2 个答案: