How To Fix A DIV When Scroll Horizontally And Allow To Scroll When Scroll Vertically?

Question

I have a problem. I have a webpage that is too wide like 3 time of a screen width. I allow that webpage to scroll horizontally and vertically both. But now I added a menu bar. Here I have a problem. I want my menu bar DIV to scroll vertically with page but be fix when visitor scroll my web page horizontally. How to do this?

Note: First I want CSS code, If not able to do with that then Pure JavaScript code(No JQuery). Problem DEMO: www.jsfiddle.net/X8s4X

Answer 1

Thanks for reading my Question. I got solution myself and now sharing that code below. I also created a live DEMO at www.jsfiddle.net/X8s4X/1/ for a quick view.

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