javascript - 如何修复DIV水平滚动时允许滚动并垂直滚动时允许滚动？

Question

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

注意:首先我想要CSS代码，如果无法做到这一点，那么纯JavaScript代码(没有JQuery)。 问题演示:www.jsfiddle.net/X8s4X

Answer 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>