如何在水平滚动时修复DIV并在垂直滚动时允许滚动？答案

【问题标题】：How To Fix A DIV When Scroll Horizontally And Allow To Scroll When Scroll Vertically?如何在水平滚动时修复DIV并在垂直滚动时允许滚动？
【发布时间】：2014-04-28 12:09:47
【问题描述】：

我有问题。我有一个太宽的网页，比如屏幕宽度的 3 倍。我允许该网页水平和垂直滚动。但现在我添加了一个菜单栏。这里我有一个问题。我希望我的菜单栏 DIV 与页面垂直滚动，但当访问者水平滚动我的网页时得到修复。如何做到这一点？

注意：首先我想要 CSS 代码，如果不能使用纯 JavaScript 代码（无 JQuery）。问题演示：www.jsfiddle.net/X8s4X

【问题讨论】：

标签： javascript html scroll position

【解决方案1】：

感谢您阅读我的问题。我自己得到了解决方案，现在在下面分享该代码。我还在 www.jsfiddle.net/X8s4X/1/ 上创建了一个现场演示，以便快速查看。

<script type='text/javascript'>
window.onscroll = xScroll;
function xScroll(){
 var x = window.pageXOffset;
 var y = window.pageYOffset;
    if (x){
    document.getElementById('one').style.position = 'fixed';
    }
    if (y){
    document.getElementById('one').style.position = 'relative';    
    }
}
</script>
<style type='text/css'>
div#wrapper {
    width:2000px;
    margin:0;
    padding:0;
}
div#one {
    height: 50px;
    background: #ddd;
    width: 100vw;
}
div#two {
    background: #efefef;
}
</style>
<div id="wrapper">
<div id="one">
This DIV Should Be Fixed When Scroll Horizontally And Will Be Scroll Able When Scroll Vertically.
</div>
<div id="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec consequat ante. Proin sit amet mauris pretium, tristique risus et, eleifend enim. Phasellus gravida enim a lorem aliquet semper. Duis placerat sed dui ut feugiat. Curabitur elementum eu leo eget vestibulum. Praesent vel condimentum est. Nullam dignissim, nulla eu tincidunt tempor, sem turpis interdum elit, non rhoncus orci ante sit amet lectus. Vivamus ut dolor id tortor venenatis semper. Ut id tortor consectetur, pretium felis a, vehicula massa. Integer ultrices dui id nisl accumsan, eu dictum sapien mollis. Vivamus volutpat dignissim fringilla. Aenean vitae felis consectetur, tincidunt augue quis, fringilla augue. Nam ultrices lobortis quam eget rhoncus. Fusce eu ante ut mauris fermentum euismod non et nisl. Nulla posuere rutrum massa non malesuada.   
</div>
</div>

【讨论】：