欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基础业务:滚动到指定位置导航固定(CSS实现)

程序员文章站 2022-06-26 11:22:10
最近公司做的业务都是使用Vue、Element写的,涉及到的相应的基础业务像轮播、预加载、懒加载,都是使用 NPM上的工具来实现,原理和基础还是要有的,就来实现几个项目中常用到的业务。 经常见到这样的效果,导航在页面中间,当界面滚动到导航的时候,导航就变成了 布局。为了看效果,我加了边框。 刚开始, ......

最近公司做的业务都是使用Vue、Element写的,涉及到的相应的基础业务像轮播、预加载、懒加载,都是使用
NPM上的工具来实现,原理和基础还是要有的,就来实现几个项目中常用到的业务。

经常见到这样的效果,导航在页面中间,当界面滚动到导航的时候,导航就变成了fixed布局。为了看效果,我加了边框。

基础业务:滚动到指定位置导航固定(CSS实现)

刚开始,京东金融的注册登陆、还有下载App的导航在界面中部。当你滚动到导航的位置或者是再向下滚动的时候,导航就固定住了。

基础业务:滚动到指定位置导航固定(CSS实现)

这就是大概效果,反之滚动回来的时候,导航还在界面中部。来实现一下吧。

JS实现

不难,首先记录最初导航的位置,然后监听scroll事件控制CSS就好了。说的简单,感觉做了整么长时间的前端,基础都快忘光了,做了好久才实现,其中都是基础不牢固惹的货,看来以后还是要注重基础。

话不多说,就是几行代码,优化就不做了。

        methods: {
            scrolls () {
                var header = this.$refs.header.$el   
                var headerTop = header.offsetTop                             
                window.onscroll = () => {
                    if (document.documentElement.scrollTop > headerTop)
                        header.style.position = 'fixed'
                    else
                        header.style.position = 'static'
                }
            }
        },
        mounted () {
            this.scrolls()
        }

对呀,这么简单,为啥还整了一篇随笔呢?别急,那你会用CSS实现吗?

CSS实现

面试时候有人会问,position有那几种值,你说:绝对的、相对的、fixed,能说出这些是不及格的。

那你想了想,哦对,还有static,嗯,勉强合格。

优秀一点的同学会说还有inheritinitialunset,嗯不错,挺好,还有吗?

这时候你赶紧趁着趁着面试官说话的时机百度了一下,发现还有一个值,sticky,你装作思考了一下说还有一个sticky,面试管觉得你很不错,那你在业务种使用过这个值吗?GG。

sticky,就叫它粘性定位吧,粘性定位是基于position:relativeposition:fixed两者之间的,为什么说介于两者之间呢?粘性定位根据一个阈值来决定,超出阈值之前采用相对定位,超出阈值之后就是fixed定位了。

那这个阈值又是什么呢?就是toprightbottomleft四种之一,也只有这四种之一,才能让粘性定位生效,否则表现为相对定位

相对定位和fixed定位,拿不就完美的解决了我们的问题了吗?没错。来试试吧。

.header {
        color: #666;
        height: 100px;
        line-height: 100px;
        position: sticky;
        top: 0px;
        left: 0px;
        right: 0px;
        font-size: 32px;
        background: #fff url(//m.jr.jd.com/spe/qyy/main/images/jr-logo.png) center center no-repeat;
        background-size: auto 50%;
        z-index: 100;
        border: 1px solid #999;
        }

看看效果:

基础业务:滚动到指定位置导航固定(CSS实现)

和之前使用JS实现的没什么区别,不过有句话说的好,能用CSS的话就别用JS,从性能上来考虑还是粘性定位更好一点。

注意了:并且 top 和 bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。

不过美中不足的是:position:sticky的兼容性不太强。

如果我们在面试中能说出这样的一个属性及其相关说明,并能给出它具体的业务场景的话,那就相当的不错了。