Question

我正在尝试在Angular 5中为我的表实现粘性标头。

这些是我推荐的链接。 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>`

这就是我的代码。

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

How to handle window scroll event in Angular 4?

Answer 1

这是一个Sandbox，其中包含一个示例，该示例应该在几乎所有地方都有效。在演示中显示的示例中，我使用的指令负责在导航栏上设置position:fixed属性，并在内容上设置适当的margin-top，以使内容不重叠，在“凝视”的时刻。

您也可以签出position:sticky css属性，但在某些旧版浏览器中将无法使用。我希望这会有所帮助：）

Answer 2

您可能可以利用我的库“ angular-sticky-things”。可通过npm进行访问：

npm install @w11k/angular-sticky-things

或者只是仔细看一下我的源代码-并不是很多。有趣的部分是here。我认为将此类内容转换为可重复使用的指令非常重要。

请让我知道div（而不是窗口）中所需的粘物功能是否可以直接使用-否则，我将为您添加该功能。

我在Angular 5中的表格的标头

2 个答案: