我正在做一个有角度的项目。我想添加一个最初具有透明背景的导航栏,但在滚动时它会改变其颜色。我正在为此使用引导类
我的导航栏标题是 html 代码:
<nav class="navbar navbar-expand-md sticky-top">
...
</nav>
在哪里可以添加我的脚本来更改滚动条的颜色
你可以通过以下方式实现这一点@HostListner
在你的Typescript
file.
import { HostListener } from @angular/core;
@HostListener('window:scroll', ['$event'])
onWindowScroll() {
let element = document.querySelector('.navbar') as HTMLElement;
if (window.pageYOffset > element.clientHeight) {
element.classList.add('navbar-inverse');
} else {
element.classList.remove('navbar-inverse');
}
}
将滚动事件放在 HTML 部分。
<nav class="navbar navbar-expand-md sticky-top" (scroll)="onWindowScroll();"></nav>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)