Angular 5中我的表格的粘性标题答案

【问题标题】：Sticky header for my table in Angular 5Angular 5中我的表格的粘性标题
【发布时间】：2018-08-20 13:01:58
【问题描述】：

我正在尝试在 Angular 5 中为我的表格实现一个粘性标题。

这些是我引用的链接。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

我需要类似的东西，但我的用法是将可滚动内容放在可滚动的 div 中。因此我的滚动值保持不变，它们不会改变。我可以触发 onscroll 事件

`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="body">
<div class="header">
  <h2>Scroll Down</h2>
 <p>Scroll down to see the sticky effect.</p>
 </div>

 <div id="navbar">
   <a class="active" href="javascript:void(0)">Home</a>
   <a href="javascript:void(0)">News</a>
   <a href="javascript:void(0)">Contact</a>
 </div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position. 
 </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
  definitiones no quo, maluisset concludaturque et eum, altera fabulas ut 
  quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert 
  laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no 
  molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
  definitiones no quo, maluisset concludaturque et eum, altera fabulas ut 
  quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert 
  laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no 
  molestiae voluptatibus.</p>
  </div>
  </div>
  <script>
  window.onscroll = function() {myFunction()};

 var navbar = document.getElementById("navbar");
 var sticky = navbar.offsetTop;

 var navbar1 = document.getElementsByClassName("body");
 var sticky1 = navbar1[0].offsetTop;

 function myFunction() {
 console.log("01 --> " + sticky1);
  console.log("02 --> " + window.pageYOffset);
  if (window.pageYOffset >= sticky) {
   navbar.classList.add("sticky")
   } else {
   navbar.classList.remove("sticky");
  }
 }
 </script>

 </body>
 </html>`

这就是我的代码。

我使用此链接将 JS 代码转换为 NG2

How to handle window scroll event in Angular 4?

【问题讨论】：

你能提供一个 plunker\stacblitz 或一个代码沙盒吗？

标签： angular scroll element

【解决方案1】：

您可能可以为此使用我的库“angular-sticky-things”。它可以通过 npm 获得：

npm install @w11k/angular-sticky-things

或者只是仔细看看我的源代码 - 没有那么多。有趣的部分是here。我认为将这些东西移动到可重用的指令中是非常重要的。

请让我知道是否需要在 div 而不是窗口中的粘性事物的功能开箱即用 - 否则，我只会为您添加该功能。

【讨论】：

嗨，我试过你的库，它很棒，我面临的唯一问题是标题与 tbody 行的大小不一样
您是否使用了间隔元素？如果可能，请提供问题的堆栈闪电战，我会解决它。
非常感谢您花时间回复，stackblitz.com/edit/angular-a7q2ro 这里是示例，向下滚动表格您就会知道问题所在，请不要更改我的 css，因为它依赖于其他东西跨度>
实际上发生的情况是，当我向下滚动thead 时会挤压自己，但tbody 已根据数据扩展
啊，我现在可以看到您的问题了。桌子很特别。由于 td/th 的宽度由列内容决定。您可能需要为每列应用固定宽度。 stackblitz.com/edit/…

【解决方案2】：

这是一个Sandbox 的示例，它几乎可以在任何地方使用。在演示中显示的示例中，我使用了一个指令，该指令负责在导航栏上设置position:fixed 属性并在内容上设置适当的margin-top，以便内容不重叠，在'固定'。

您也可以查看position:sticky css 属性，但它不适用于某些较旧的浏览器。我希望这会有所帮助:)

【讨论】：

感谢您的建议，但我的情况是滚动动作出现在可滚动的 div 内。那就是粘性不起作用的地方。希望你理解这个问题:)
你能再看看演示链接吗，我扩展了它，所以现在还有一个带有可滚动内容的 div。
谢谢！这就是我正在寻找的。我更改了 scroll-box.component.html 并且它有效。
Lorem ipsum dolor sit amet, illum.

不可变标头