Vue 滚动导航栏固定(导航吸顶)

痛定思痛。 2022-09-10 06:30 400阅读 0赞

[Vue导航条吸顶效果 - 简书][Vue_ -]

[https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnblogs.com_nbwsj_p_12122689.html]

[Vue实现导航栏吸顶效果\_彭世瑜的博客-CSDN博客][Vue_-CSDN]

[vue 吸顶导航\_叫我官人-CSDN博客][vue _-CSDN]

![70][]

<template>
        <div class="scroll">
            <div class="header">header</div>
            <div class="nav" :class="navBarFixed == true ? 'navBarWrap' :''">吸顶导航</div>
        </div>
    </template>
     
    <script>
    export default {
      data() {
        return {
            navBarFixed: false,
        };
      },
     
      components: {},
     
      mounted() {
        window.addEventListener("scroll", this.watchScroll);
      },
     
      methods: {
        watchScroll() {
          var scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
            console.log(scrollTop)
          //  当滚动超过 90 时，实现吸顶效果
          if (scrollTop > 90) {
            this.navBarFixed = true;
          } else {
            this.navBarFixed = false;
          }
        }
      }
    };
    </script>
    <style scoped>
    .scroll{
        height:2000px;
    }
    .header {
      height: 90px;
      background: red;
      text-align: center;
      color: #fff;
    }
    .nav{
        padding:15px;
        width:100%;
        box-sizing: border-box;
        background:greenyellow;
        text-align: center;
    }
    .navBarWrap {
        position:fixed;
        top:0;
        z-index:999;
      }
     
    </style>

[Vue_ -]: https://www.jianshu.com/p/3786ee55466c
[https_www.cnblogs.com_nbwsj_p_12122689.html]: https://www.cnblogs.com/nbwsj/p/12122689.html
[Vue_-CSDN]: https://blog.csdn.net/mouday/article/details/106782511
[vue _-CSDN]: https://blog.csdn.net/doinb_6/article/details/81872405
[70]: /images/20220829/8c3d5168fc4c4453906b9adb04c3eb63.png