问题描述
我有一个元素固定在顶部的x，y轴上。有什么办法可以改变它只能固定在x轴上吗？例如。 - 所以我可以将固定元素向左和向右滚动。
当前代码：
< div style =position：fixed; top：0; width：2000px;>
固定头元素
< / div>
< div style =overflow：auto; width：2000px;>
可滚动内容元素
< / div>
这是一个了不起的问题，CSS3没有答案您。没有办法在一个轴上固定一个元素，但不能在另一个轴上固定元素。
理想的解决方案是提供CSS3属性，比如position：fixed-x和position：fixed-y。但是没有这样的事情。
我知道有这个非常有用的行为的唯一方法是编写JavaScript函数来处理setInterval（）事件;在每个事件轮询当前的X或Y滚动位置;并且如果您要修复的轴上的滚动位置发生了变化，请更改固定元素的滚动位置以进行补偿，即将其移回到它所属的位置。
我实际上使用这种方法，它的工作原理，但它是一个痛苦。我的代码每隔十分之一轮询一次X和Y的滚动位置，这通常足以让您看起来不太混乱。
您可以在工作中看到解决方案 。缩小窗口以显示水平滚动条，左右滚动表格。柱头随桌子一起移动，但您可以垂直滚动桌子，柱头保持放置。
I have an element fixed to the top x, y axis. Is there any way how I change it to be fixed only to the x-axis? E.g. - so I would be able to scroll the fixed element to the left and to the right.
Current code:
<div style="position:fixed;top:0;width:2000px;">
The fixed header element
</div>
<div style="overflow:auto;width:2000px;">
the scrollable content element
</div>
This is a terrific question and CSS3 has no answer for you. There's no way to fix an element in one axis but not the other.
The ideal solution, imo, is to offer CSS3 attributes like, say, position:fixed-x and position:fixed-y. But there is no such thing.
The only way I know of to have this very useful behavior is to write JavaScript function to handle a setInterval( ) event; poll the current X or Y scroll position at each event; and, if the scroll position on the axis you want to fix has changed, then change the scroll position of the fixed element to compensate, i.e., to move it back to where it belongs.
I actually use this method and it works, but it's a pain. My code polls the X and Y scroll positions every tenth of a second, which is often enough to not look too herky-jerky.
You can see the solution at work in this long table. Narrow the window to make a horizontal scroll bar appear, the scroll the table left and right. The column heads move with the table but you can scroll the table body vertically and the column heads stay put.
这篇关于将元素固定到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！