Anchoring an item in place for vertical scrolling but not horizontal
I have a menu that is contained in a div with the class float. float is given below:
.float {
display:block;
position:fixed;
top: 20px;
left: 0px;
z-index: 1999999999;
}
* html .float {position:absolute;}
The above css class makes it so that the menu stays in place regardless of how the user scrolls (the *html is for internet explorer). However, I need to make it so that it only stays in place when the user scrolls vertically. It should move left to right if the user scrolls left or right. I can't seem to find any css to allow for this, and any javascript I run into is choppy in adjusting the item. The javascript below works but I'd like something a bit smoother if possible. I have the body tag s开发者_如何学Pythonet to onload="scrolladj()" with scrolladj() being written out below:
function scrolladj()
{
if(brow == 'Microsoft Internet Explorer')
{
o = document.documentElement.scrollLeft;
}
else
{
o = window.pageXOffset;
}
$('main_menu').style.left = (20-o)+'px';
}
Any ideas?
The following code works for FF and Chrome
<HTML>
<HEAD>
<style>
.float {
display:block;
position:fixed;
top: 20px;
left: 0px;
z-index: 1999999999;
}
</style>
<script>
function x()
{
if(document.body.offsetLeft != document.body.scrollLeft)
document.getElementById('fd').style.position='absolute';
else
document.getElementById('fd').style.position='fixed';
}
</script>
</HEAD>
<BODY onscroll="x();">
<div class="float" id="fd">
sdkjfkljfs
</div>
<div style="overflow: auto; width: 2000px; height: 1000px" >
</div>
</BODY>
</HTML>
加载中,请稍侯......
精彩评论