角形导航栏，无残酷过渡

问题描述

当我将导航栏置于“粘性”状态时，我遇到问题，当我超过导航栏的默认位置时，它只会在我位于页面顶部时才恢复为正常状态，这会导致“残酷”过渡。

无论我多么努力，如何才能避免突然过渡，但是我找不到任何解决方案或它不起作用。

以下是显示预览的stackblitz链接（手动移动条，而不用滚轮真正地看到残酷的效果）：https://stackblitz.com/edit/angular-raebek?file=src/app

解决方法

如果您可以使用内置的CSS position: sticky，那么可以假设您对它的兼容性discussion on Hacker News

满意。

这里是叠叠闪电战https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility

我们需要使用angular的:host选择器在app-navbar元素上设置此样式。它必须是一个块级元素（Angular默认为内联），具有position: sticky和一个top数量，您希望将其粘贴在此处，在本例中为0。然后，我们删除了所有JS组件滚动列表器中的类设置

将此添加到 navbar.component.css

/* we can use the built in CSS sticky feature,but we must do it on the app-navbar element so we use :host */
:host {
  display: block;
  position: sticky; 
  top: 0;
}