在滚动

时间:2017-07-06 22:18:56

标签: javascript css html-table absolute

我正在尝试结合两个世界中最好的并完成固定定位在设置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操作发生而抖动每次事件监听器触发时。

因为它是用上面的逻辑重新计算的。

问题:我是否可以将一个绝对定位的表格标题元素附加到视口顶部,如固定定位允许?那里有更有效的解决方案吗?

2 个答案:

答案 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;
&#13;
&#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>