Javascript 角度5滚动时的粘滞菜单
当菜单到达页面顶部时,我会将菜单位置更改为固定。下面是我如何进行的Javascript 角度5滚动时的粘滞菜单,javascript,html,css,angular,typescript,Javascript,Html,Css,Angular,Typescript,当菜单到达页面顶部时,我会将菜单位置更改为固定。下面是我如何进行的 import { Component, OnInit, Inject, HostListener } from '@angular/core'; import {Location} from '@angular/common'; import { DOCUMENT } from "@angular/platform-browser"; .... export class DashboardComponent implements
import { Component, OnInit, Inject, HostListener } from '@angular/core';
import {Location} from '@angular/common';
import { DOCUMENT } from "@angular/platform-browser";
....
export class DashboardComponent implements OnInit {
constructor(private _location: Location, @Inject(DOCUMENT) private doc: Document) { }
public fixed: boolean = false;
@HostListener("window:scroll", [])
onWindowScroll() {
let num = this.doc.body.scrollTop;
console.log("scroll top" , this.doc.body.scrollTop)
if ( num > 50 ) {
this.fixed = true;
}else if (this.fixed && num < 5) {
this.fixed = false;
}
}
问题是scrollTop没有得到更改。当我执行console.logthis.doc.body.scrollTop和scroll时,值为0且不更改。很可能主体不是滚动容器,HTML元素是 尝试document.documentElement.scrollTop
在浏览器中,document.documentElement是对根HTML元素的引用您需要支持哪些浏览器?如果你不支持IE,CSS的立场:sticky规则可能是一个不错的选择,它应该支持IE。。
<div [class.menus]="fixed">
<div class="left-menu ">
<app-left-menu></app-left-menu>
</div>
<div class="second-menu" >
<app-second-menu (display)="onDisplay($event)" [expanded]=expanded ></app-second-menu>
</div>
</div>
.menus{
position: fixed;
}