Fixed to left on horizontal scroll - css

Question

I have navigation bar that is fixed to the top of the page when user scroll down.
I also need it to be fixed to the top left corner of the right block when user scroll horizontally. How to do this? Thanks for any advice.
CSS:
#box {
margin: 0 auto;
}
#content {
height: 500px;
width: 1000px;
}
#left {
max-width: 20%;
display: inline-block;
background: #aaa;
}
#right {
max-width: 80%;
display: inline-block;
background: red;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
height: 50px;
background: #666;
}
HTML:
<div id="box">
<div id="content">
<div id="left">LEFT</div>
<div id="right">
<nav>
Some text
</nav>
RIGHT
</div>
</div>
</div>
jsfiddle here: https://jsfiddle.net/deguac8y/

Answer 1

You can use jQuery to detect scrolling horizontally and by using class you can switch between having a fixed position nav to absolute position nav when horizontal scrolling is detected without losing the current scroll position.
JSFiddle
$(document).ready(function (){
var detectScroll = 0;
$(window).scroll(function () {
var documentScrollLeft = $(document).scrollLeft();
if (detectScroll != documentScrollLeft) {
detectScroll = documentScrollLeft;
$('nav').addClass('notFixed');
var scrollTop = $(window).scrollTop();
$('nav').css('top',scrollTop);
} else {
$('nav').removeClass('notFixed');
$('nav').css('top','auto');
}
});
});
body {
margin:0
}
#box {
margin: 0 auto;
}
#content {
height: 500px;
width: 1000px;
}
#left {
max-width: 20%;
display: inline-block;
background: #aaa;
}
#right {
max-width: 80%;
display: inline-block;
background: red;
height: 100%;
width: 100%;
}
nav {
position: fixed;
height: 50px;
background: #666;
}
nav.notFixed {
position:absolute;
top:auto;
left:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
<div id="content">
<div id="left">LEFT</div>
<div id="right">
<nav>Some text</nav>RIGHT</div>
</div>
</div>