Question

我有问题。我的网页太宽，就像屏幕宽度的3倍。我允许该网页水平和垂直滚动。但现在我添加了一个菜单栏。我有一个问题。我希望我的菜单栏DIV与页面垂直滚动，但是当访问者水平滚动我的网页时要修复。怎么做？

注意：首先我想要CSS代码，如果不能使用那么纯JavaScript代码（No 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>

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

1 个答案: