我正在尝试结合两个世界中最好的并完成固定定位在设置top: 0（附加到视口顶部）时的作用，同时保持元素绝对定位，以便它使用其父元素水平滚动（使用fixed执行此操作是有问题的。）
问题是这是一个表头，所以试图破解我的方式，嵌套divs设置为不同的定位方法在这里不起作用。
我目前尝试的是在计算滚动事件监听器中表格顶部与视口顶部之间的距离时保持表头的位置为absolute：
const distanceToTop = this.headerElement.getBoundingClientRect().top;
this.stickyHeaderElement.style.top = `${Math.abs(distanceToTop)}px`;
this.headerElement是原始表格标题，您可以滚动浏览（不执行任何操作），而stickyHeader实例位于smoke＆amp;镜子发生了。
这个当前的方法正在做我想要的... 然而，它是非常hacky因为当你滚过原始表头并粘贴实例附加时，粘性标题由于所有DOM操作发生而抖动每次事件监听器触发时。
因为它是用上面的逻辑重新计算的。
问题：我是否可以将一个绝对定位的表格标题元素附加到视口顶部，如固定定位允许？那里有更有效的解决方案吗？
答案 0 :(得分：1)
这就是你想要的吗？
let fixed = document.getElementById('fixed');
window.addEventListener("scroll", e => window.requestAnimationFrame( () => {
fixed.style.marginLeft = -1 * window.scrollX + "px";
}));#fixed {
position: fixed;
background-color: white;
}
#unfixed {
color: white;
}<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div>
<table>
<thead>
<tr id="fixed">
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td>fibble</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>ffft</td>
</tr>
<tr id="unfixed">
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td>fibble</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>ffft</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
答案 1 :(得分：-1)
#header_container {
background: green;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 60px;
margin: 0 auto;
width: 100%;
text-align: center;
}
#container {
margin: 0 auto;
overflow: auto;
padding: 80px 0;
width: 100%;
}
#content {
height: 500px;
}<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<div id="container">
<div id="content">
Content Here
</div>
</div>