我正在尝试结合两个世界中最好的并完成固定定位在设置top: 0
(附加到视口顶部)时的作用,同时保持元素绝对定位,以便它使用其父元素水平滚动(使用fixed执行此操作是有问题的。)
问题是这是一个表头,所以试图破解我的方式,嵌套divs
设置为不同的定位方法在这里不起作用。
我目前尝试的是在计算滚动事件监听器中表格顶部与视口顶部之间的距离时保持表头的位置为absolute
:
const distanceToTop = this.headerElement.getBoundingClientRect().top;
this.stickyHeaderElement.style.top = `${Math.abs(distanceToTop)}px`;
this.headerElement
是原始表格标题,您可以滚动浏览(不执行任何操作),而stickyHeader实例位于smoke&镜子发生了。
这个当前的方法正在做我想要的... 然而,它是非常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>
&#13;
答案 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>