滚动时的Angular5粘性菜单

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (52)

当菜单到达页首时,我会将菜单位置更改为固定。这是我如何继续。

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;
    }
  }

HTML中

<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>

CSS

.menus{
  position: fixed;
}

问题scrollTop没有改变。当我做console.log(this.doc.body.scrollTop)和滚动时,值是0并且不改变。

提问于
用户回答回答于

最有可能的身体不是滚动容器,HTML元素是

尝试 document.documentElement.scrollTop

在浏览器中,它document.documentElement是对根HTML元素的引用

扫码关注云+社区

领取腾讯云代金券