angular5中如何实现固定导航条效果，angualr实现类似淘宝固定导航条效果

angular5中实现固定导航条效果，我要做的效果是支付宝首页上下滑动的时候，标题栏的那个效果。

我是想，手指滑动的时候获取元素的top值，根据这个值显示隐藏标题栏上的那部分。

不知道描述的正确不正确

就是想在angular5中实现固定导航条效果，类似淘宝固定导航条效果。

各位老铁

gogogosns 1楼•6 年前

可以想到的解决方案：

1、第一种解决方案 angualr2中的HostListener实现（没有试过大家可以试试） 来源：http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener

import { HostListener} from "@angular/core";
 
@HostListener("window:scroll", [])
onWindowScroll() {
 //we'll do some stuff here when the window is scrolled
}

2、第二种解决方案用原生js实现，直接在angular中写原生js

直接在 ngOnInit() 的生命周期函数里面写如下代码：

 window.onscroll= function(){
                //变量t是滚动条滚动时，距离顶部的距离
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollup = document.getElementById('scrollup'); //你的导航条
                //当滚动到距离顶部200px时，返回顶部的锚点显示
                if(t>=200){
                    scrollup.style.display="block";
                }else{          //恢复正常
                    scrollup.style.display="none";
                }
            }

或者

 document.body.onscroll=document.documentElement.onscroll= function(){
                //变量t是滚动条滚动时，距离顶部的距离
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollup = document.getElementById('scrollup');     //你的导航条
                //当滚动到距离顶部200px时，返回顶部的锚点显示
                if(t>=200){
                    scrollup.style.display="block";
                }else{          //恢复正常
                    scrollup.style.display="none";
                }
            }