基础业务：滚动到指定位置导航固定（CSS实现）

最近公司做的业务都是使用Vue、Element写的，涉及到的相应的基础业务像轮播、预加载、懒加载，都是使用

NPM上的工具来实现，原理和基础还是要有的，就来实现几个项目中常用到的业务。

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

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

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

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，嗯，勉强合格。

优秀一点的同学会说还有inherit、initial、unset，嗯不错，挺好，还有吗？

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

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

那这个阈值又是什么呢？就是top、right、bottom、left四种之一，也只有这四种之一，才能让粘性定位生效，否则表现为相对定位。

相对定位和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;
        }

看看效果：

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

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

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

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

原文地址：https://www.cnblogs.com/isLiu/p/8683801.html