在Y轴上固定元素，但在x轴上滚动页面? [英] Fixing an element on Y axis, but scrolling with page on x axis?
本文介绍了在Y轴上固定元素，但在x轴上滚动页面?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以将元素固定在页面上的"y"位置，但是当左右滚动时，该元素也在x轴上滚动吗?
Is it possible to fix an element to a 'y' position on the page, but when scrolling left and right, this element scrolls on the x-axis as well?
就我而言，我有一个数据表，该数据表总共有20列(太多了，无法在不滚动页面的情况下显示).我想将表标题固定在页面顶部，但是这也可以固定x滚动，因此在左右滚动时标题不会移动.只能固定元素的y位置吗?
In my case, I have a table of data which has 20 columns in total (far too many to display without page scrolling). I would like to fix the table headers to the top of the page, however this also fixes x-scrolling so when scrolling left and right, the headers do not move. Is it possible to only fix the y-positioning of an element?
我创建了一个基本的小提琴，在这里显示了标准表: http://jsfiddle.net/0n9d92er/.基本上，我希望标题1-20固定在顶部(用于垂直滚动)，但是当向右滚动时，我应该能够看到从1到20的每个标题(水平滚动).
I've created a basic fiddle showing a standard table here: http://jsfiddle.net/0n9d92er/. Basically, I want header 1-20 fixed at the top (for vertical scrolling), but when scrolling to the right, I should be able to see every header from 1 to 20 (when horizontally scrolling).
.header {
width: 2000px;
}
.tg {
border-collapse:collapse;
border-spacing:0;
}
.tg td {
font-family:Arial, sans-serif;
font-size:14px;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg th {
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg .tg-i7wz {
font-size:20px
}
<table class="tg">
<tr>
<th class="tg-i7wz">HEADER 1</th>
<th class="tg-031e">HEADER 2</th>
<th class="tg-031e">HEADER 3</th>
<th class="tg-031e">HEADER 4</th>
<th class="tg-031e">HEADER 5</th>
<th class="tg-031e">HEADER 6</th>
<th class="tg-031e">HEADER 7</th>
<th class="tg-031e">HEADER 8</th>
<th class="tg-031e">HEADER 9</th>
<th class="tg-031e">HEADER 10</th>
<th class="tg-031e">HEADER 11</th>
<th class="tg-031e">HEADER 12</th>
<th class="tg-031e">HEADER 13</th>
<th class="tg-031e">HEADER 14</th>
<th class="tg-031e">HEADER 15</th>
<th class="tg-031e">HEADER 16</th>
<th class="tg-031e">HEADER 17</th>
<th class="tg-031e">HEADER 18</th>
<th class="tg-031e">HEADER 19</th>
<th class="tg-031e">HEADER 20</th>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT </td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
</table>
非常感谢您提前提供帮助.
Thanks for any help in advance.
推荐答案
下面是一个不需要jQuery的快速示例，它使用JavaScript在页面滚动时向下浮动标题:
Here's a quick example that does not require jQuery, and uses JavaScript to float the header down as the page scrolls:
var thead = document.querySelector(".tg tr:first-child");
window.onscroll = function() {
thead.style["-webkit-transform"] = "translateY(" + window.scrollY + "px)";
thead.style.transform = "translateY(" + window.scrollY + "px)";
};
.header {
width: 2000px;
}
.tg {
border-collapse:collapse;
border-spacing:0;
}
.tg td {
font-family:Arial, sans-serif;
font-size:14px;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg th {
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg .tg-i7wz {
font-size:20px;
}
.tg tr:first-child {
background-color: white;
outline: solid 1px black;
}
<table class="tg">
<tr>
<th class="tg-i7wz">HEADER 1</th>
<th class="tg-031e">HEADER 2</th>
<th class="tg-031e">HEADER 3</th>
<th class="tg-031e">HEADER 4</th>
<th class="tg-031e">HEADER 5</th>
<th class="tg-031e">HEADER 6</th>
<th class="tg-031e">HEADER 7</th>
<th class="tg-031e">HEADER 8</th>
<th class="tg-031e">HEADER 9</th>
<th class="tg-031e">HEADER 10</th>
<th class="tg-031e">HEADER 11</th>
<th class="tg-031e">HEADER 12</th>
<th class="tg-031e">HEADER 13</th>
<th class="tg-031e">HEADER 14</th>
<th class="tg-031e">HEADER 15</th>
<th class="tg-031e">HEADER 16</th>
<th class="tg-031e">HEADER 17</th>
<th class="tg-031e">HEADER 18</th>
<th class="tg-031e">HEADER 19</th>
<th class="tg-031e">HEADER 20</th>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT </td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
<tr>
<td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
</tr>
</table>
JSFiddle版本: http://jsfiddle.net/0n9d92er/4/
JSFiddle Version: http://jsfiddle.net/0n9d92er/4/
这篇关于在Y轴上固定元素，但在x轴上滚动页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
