粘性 header 我的 table 在 Angular 5

Question

我正在尝试为 Angular 中的 table 实施粘性 header 5.

这些是我推荐的 link。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

我需要与此类似的东西，但我的用法是将可滚动内容放在 Scrollable 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>`

这就是我的代码。

我用这个link把JS代码转成NG2

Answer 1

这里有一个 Sandbox 示例，应该在任何地方都适用。在演示中显示的示例中，我使用的指令负责在导航栏上设置 position:fixed 属性并在内容上设置适当的 margin-top，以便内容不重叠，在'fixation'.

的时刻

您也可以查看 position:sticky css 属性，但它在某些较旧的浏览器中不起作用。希望对您有所帮助:)

Answer 2

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

npm install @w11k/angular-sticky-things

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

请让我知道 div 而不是 window 中粘性东西的所需功能是否开箱即用 - 否则，我只会为您添加该功能。

粘性 header 我的 table 在 Angular 5

Sticky header for my table in Angular 5

scroll

element

angular