Angular 没有残酷过渡的粘性导航栏

Question

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

我怎么才能不出现这种突然的转变，无论我如何努力寻找，但我找不到任何解决方案或它不起作用。

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

Answer 1

如果您可以使用内置的 CSS position: sticky，假设您对它的兼容性没问题，那么它会为您处理好 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility

这是更新的堆栈闪电战 https://stackblitz.com/edit/angular-oej69x?file=src/app/navbar/navbar.component.css

我们需要使用 angular 的 :host 选择器在 app-navbar 元素上设置此样式。它需要是一个块级元素（Angular 默认为内联），具有 position: sticky 和一个 top 你希望它粘贴的位置的数字，在我们的例子中为 0。然后我们摆脱组件滚动监听器中的所有 JS class 设置

将此添加到 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;
}

Angular 没有残酷过渡的粘性导航栏

Angular sticky navbar without brutal transition

sticky

navbar

css-transitions

angular