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

发布于 5 年前 作者 sinazl 1587 次浏览 来自 问答

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

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

不知道描述的正确不正确

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

各位老铁

1 回复

可以想到的解决方案:

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";
                }
            }
回到顶部