实现Vue中的吸顶菜单

//原理：通过检测window的滚动事件，让滚动的scroll到一定程度，菜单固定在顶部。在Vue中只要写好一个样式，当scrollTop>offsetTop时触发该样式，即可固定 //这是html部分

<body>
        <div class="searchBar" id="searchBar">
            <ul :class="searchBarFixed == true ? 'isFixed' :''">
                <li>首页</li>
                <li>分类</li>
                <li>购物车</li>
                <li>个人</li>
            </ul>
        </div>
    </body>

//这是css样式

* {
        margin: 0;
        padding: 0;
    }

body {
        height: 2000px;
    }

.searchBar {
        position: absolute;
        width: 100%;
        top: 300px;
        border-bottom: 1px solid #ddd;
    }

.isFixed {
        position: fixed;
        background-color: #Fff;
        top: 0;
        z-index: 999;
    }

ul {
            width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
    }

li {
        font-size: 0.8rem;
        text-align: center;
        flex: 1;
    }

//这是Vue内的数据驱动

      new Vue({
            el: "#searchBar",
            data: {
                searchBarFixed: false;
            },
            //生命周期，加载完成时监听滚动事件
            mounted() {
                window.addEventListener('scroll', this.handleScroll);
            },
            //定义一个方法
            methods: {
                handleScroll() {
                    //滑动过的距离
                    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    //console.log(scrollTop)
                    //获取一开始距离头部的距离
                    var offsetTop = document.querySelector('#searchBar').offsetTop;
                    //console.log(offsetTop)
                    if(scrollTop > offsetTop) {
                        this.searchBarFixed = true;
                    } else {
                        this.searchBarFixed = false;
                    }
                }
            },
            //当退出页面时破坏这个滚动事件，即移除该事件
            destroyed() {
                window.removeEventListener('scroll', this.handleScroll)
            }

        })

minbaowang / SSeffects

实现Vue中的吸顶菜单 #4