码迷,mamicode.com
首页 > 其他好文 > 详细

angular的滚动检测和窗口大小变化检测

时间:2020-01-27 22:21:34      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:mit   log   text   nav   滚动事件   The   event   Fix   窗口   

滚动检测

  // 监听滚动事件
  scrolling: any
  ngOnInit() {
    this.scrolling = fromEvent(window, ‘scroll‘) // fromEvent(element,event)
      .subscribe((event) => { // 订阅
        this.onScroll()
      })
  }
  onScroll () {
    this.scrollTop = document.documentElement.scrollTop
    this.elementScrollTop = this.height
    // console.log(this.scrollTop)
    if (this.scrollTop >= (this.elementScrollTop)) {
      this.nav.nativeElement.style.cssText = "position:fixed;z-index:2;top:0;width:102%;"
    } else {
      this.nav.nativeElement.style.cssText = "position:relative;"
    }
  }

窗口大小变化

  // 监听窗口大小变化
  resized: any
  ngOnInit() {
    this.sliderHeight.emit(this.slider.nativeElement.offsetHeight)
    this.resized = fromEvent(window, ‘resize‘)
    .subscribe((event)=>{
      this.sliderHeight.emit(this.slider.nativeElement.offsetHeight)
    })
  }

 

angular的滚动检测和窗口大小变化检测

标签:mit   log   text   nav   滚动事件   The   event   Fix   窗口   

原文地址:https://www.cnblogs.com/foreversimon/p/12236932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!