将绝对定位的元素修复到滚动时的视口顶部

【问题标题】：Fix absolutely positioned element to top of viewport on scroll将绝对定位的元素修复到滚动时的视口顶部
【发布时间】：2017-07-08 02:32:34
【问题描述】：

我正在尝试结合两全其美，并在您设置 top: 0（附加到视口顶部）时完成固定定位所做的事情，同时保持元素绝对定位，使其与父元素水平滚动（这样做固定是有问题的）。

关键是这是一个表格标题，因此尝试通过将嵌套的divs 设置为不同的定位方法来破解我的方式在这里不起作用。

我目前尝试的是在滚动事件侦听器中计算表格顶部到视口顶部的距离时，将表格标题保持在absolute 的位置：

const distanceToTop = this.headerElement.getBoundingClientRect().top;
this.stickyHeaderElement.style.top = `${Math.abs(distanceToTop)}px`;

this.headerElement 是原始表格标题，您可以滚动过去（什么都不做），而stickyHeader 实例是烟雾和镜子发生的地方。

这个当前的方法正在做我想做的事情...... 然而，它是令人难以置信的hacky，因为当您滚动过去原始表格标题并附加粘性实例时，粘性标题会因所有DOM操作而发生抖动每次事件监听器触发时。

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

问题：我可以让一个绝对定位的表头元素也像固定定位一样附加到视口的顶部吗？有没有更有效的解决方案？

【问题讨论】：

  • 我相信您正在寻找的词是“sticky”。已经有很多例子和解决方案了，随便搜吧:)
  • 如果我了解您要查找的内容，您可以在元素的 .top 位于视口顶部（或您希望触发效果的任何位置）后添加 position: fixed .
  • @ingridly 是的，问题是当位置设置为固定并且您水平滚动时，附加的表格标题不会与其余内容一起滚动。绝对定位确实允许表格标题随内容水平滚动。棘手的情况。
  • 对。但是随着窗口的滚动，我想你可以在固定区域调整表头的左边距。
  • @jose 该死的。我明天可能会尝试一下。这让我很好奇。

标签： javascript css html-table absolute


【解决方案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>

【讨论】：

  • 您今天赢得了互联网，先生。
【解决方案2】：

使用 Position:fixed 时，粘性标题很简单。

#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>

【讨论】：

  • 没那么简单。如果您阅读了我的问题，我不只是将一个元素附加到视口的顶部。这很容易。问题是在 ALSO 将附加的标题 horizo​​ntally 与表的其余部分一起滚动时保持该行为。拥有fixed 职位的事情不会让你这样做。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-02-22
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode