如何解决角形导航栏,无残酷过渡
当我将导航栏置于“粘性”状态时,我遇到问题,当我超过导航栏的默认位置时,它只会在我位于页面顶部时才恢复为正常状态,这会导致“残酷”过渡。
无论我多么努力,如何才能避免突然过渡,但是我找不到任何解决方案或它不起作用。
以下是显示预览的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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。