滑动页面到一定距离，导航栏固定在顶部

前端页面展示时，并不是导航栏都在最上面，当导航面不在页面的最上面，而我们滑动页面时，滑动到导航栏，让导航栏固定在最顶部。并且在滑动到哪个部分导航栏就要被选中

 

 html代码：

<html>   
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>主页</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container" id="app">
            <div class="head">
                <image src="image/top.png" style="width: 100%;height: 430px;"></image>
            </div>
            <div :class="menuFixed == true ? 'isFixed' :''">
                <div id="menu" class="menu">
                    <div @click="clickTap('1')" :class="menuNum=='1' ? 'menuItem' : ''"><a :class="menuNum=='1' ? 'menuItem' : ''" href="#a1">产品简介</a></div>
                    <div @click="clickTap('2')" :class="menuNum=='2' ? 'menuItem' : ''"><a :class="menuNum=='2' ? 'menuItem' : ''" href="#a2">技术与创新</a></div>
                    <div @click="clickTap('3')" :class="menuNum=='3' ? 'menuItem' : ''"><a :class="menuNum=='3' ? 'menuItem' : ''" href="#a3">产品优势</a></div>
                    <div @click="clickTap('4')" :class="menuNum=='4' ? 'menuItem' : ''"><a :class="menuNum=='4' ? 'menuItem' : ''" href="#a4">关于我们</a></div>
                </div>
                <div style="height: 10px;width: 100%;background-color: #eaeaea;opacity: 0.5;"></div>
            </div>
            <div id="a1">...</div>
            <div id="a2">...</div>
            <div id="a3">...</div>
            <div id="a4">...</div>
        </div>  
    </body>
</html>

　　

css代码

 <style> 
     .container {
        width: 100%;
        height: 100%;
        margin-bottom: 15px;
    }

    .head {
        width: 100%;
        height: 430px;
        }
    .isFixed{
        position:fixed;
        width: 100%;
        height: 50px;
        background-color: #FFFFFF;
        top:0;
        left: 0;
        z-index:999;
    }
    .menu {
        width: 90%;
        margin-left: 5%;
        background-color: #FFFFFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 15px;
        text-align: center;
    }
    .menuItem {
        border-bottom: 1px #4F64DB solid;
        color: #4F64DB;
    }

    a {
        color: #444444;
        text-decoration: none;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 20px;
    }
</style>

 

js代码：

 

<script type="text/javascript">
var app = new Vue({
　　el: '#app',
　　data: {
　　　　menuNum: '0',
　　　　menuFixed:false,
　　},
　　created() {
　　　　console.log('index created function')
　　},
　　mounted() {
　　　　console.log('index mounted function')
　　　　window.addEventListener("scroll", this.handleScroll);//监听滑动事件
　　},
　　updated() {
　　　　console.log('index updated function')
　　},
　　destroyed() {
　　　　console.log('index destroyed function')
　　　　window.removeEventListener('scroll', this.handleScroll) //销毁监听滑动事件
　　},
　　 methods: {
  　　　clickTap(num) {
　　　　　　this.menuNum = num
　　　　},
　　　　handleScroll() {
       　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
       　　console.log(scrollTop) //滑动的长度
      　　 var offsetTop = document.querySelector('#menu').offsetTop
       　　var offsetTop1 = document.querySelector('#a1').offsetTop
       　　var offsetTop2 = document.querySelector('#a2').offsetTop
　　　　　　var offsetTop3 = document.querySelector('#a3').offsetTop
　　　　　　var offsetTop4 = document.querySelector('#a4').offsetTop
　　　　　　if (scrollTop > offsetTop) {
          　　this.menuFixed = true
              　　console.log("页面高度大于执行操作")
         　} else {
　　　　　　　　this.menuFixed = false
             console.log("页面高度小于执行操作")
          }
          if (scrollTop > offsetTop1) {
　　　　　　　　this.menuNum = '1'
　　　　　　　　console.log("滑到产品简介")
　　　　　　} else {       
　　　　　　　　console.log("nothing")
　　　　　　}
　　　　　　if (scrollTop > 947) {
　　　　　　　　this.menuNum = '2'
　　　　　　　　console.log("滑到技术与创新")
　　　　　　} else {
　　　　　　　　console.log("nothing")
　　　　　　}
　　　　　　if (scrollTop > 1300) {
　　　　　　　　this.menuNum = '3'
　　　　　　　　console.log("滑到产品优势")
　　　　　　} else {
　　　　　　console.log("nothing")
　　　　　　}
　　　　　　if (scrollTop > 1900) {
　　　　　　　　this.menuNum = '4'
　　　　　　　　console.log("关于我们")
　　　　　　} else {
　　　　　　　　console.log("nothing")
　　　　　　}
　　　　},
　　}
})

</script>

 效果图如下：

（1）

 

 （2）

 

 

（3）

 

posted @ 2020-11-02 15:07  这里有个博客  阅读(3819)  评论(0)  编辑  收藏  举报