我有一个包含在类 float 的 div 中的菜单。 float 如下:
.float {
display:block;
position:fixed;
top: 20px;
left: 0px;
z-index: 1999999999;
}
* html .float {position:absolute;}
上面的 css 类使菜单保持在原位，无论用户如何滚动(*html 用于 Internet Explorer)。但是，我需要让它只在用户垂直滚动时保持原位。如果用户向左或向右滚动，它应该从左向右移动。我似乎找不到任何允许这样做的 css，而且我遇到的任何 javascript 在调整元素时都是断断续续的。下面的 javascript 可以工作，但如果可能的话，我想要更流畅的东西。我将 body 标签设置为 onload="scrolladj()"并在下面写出 scrolladj():
function scrolladj()
{
if(brow == 'Microsoft Internet Explorer')
{
o = document.documentElement.scrollLeft;
}
else
{
o = window.pageXOffset;
}
$('main_menu').style.left = (20-o)+'px';
}
有什么想法吗？
最佳答案
以下代码适用于 FF 和 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>
关于javascript - 将元素固定到位以进行垂直滚动而不是水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3851437/