vue单页面锚点定位根据页面浏览的位置定位

2024-04-02 19:34:11

<!DOCTYPE html>
<html lang="en">

<head>
       <meta charset="UTF-8">
       <title>vue单页面锚点定位</title>
       
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
       <style>
           [v-cloak] {
               display: none;
           }

           * {
               margin: 0;
           }

           .el-tabs--left .el-tabs__nav-wrap.is-left::after,
           .el-tabs--left .el-tabs__nav-wrap.is-right::after,
           .el-tabs--right .el-tabs__nav-wrap.is-left::after,
           .el-tabs--right .el-tabs__nav-wrap.is-right::after {
               height: 100%;
               width: 5px;
               background: #333;
               bottom: auto;
               top: 0;
               left: 0;
           }

           .el-tabs--left .el-tabs__active-bar.is-left,
           .el-tabs--left .el-tabs__nav-wrap.is-left::after {
               left: 0!important;
               width: 6px!important;
           }

           .menus_left_list {
               position: fixed;
               top: 300px;
           }

           .el-main {
               padding: 0;
           }

           .el-container {
               width: 64%;
               margin: 0 auto;
               background: #0e0e0e;
           }

           .el-menu--horizontal {
               float: right;
           }

           .container {
               width: 100%;
               margin: auto;
           }

           .content_list {
               display: flex;
               flex-wrap: wrap;
           }

           .el-tabs__item {
               color: #FFF;
           }

           .header {
               width: 100%;
               height: 107px;
               background: #0e0e0e;
               position: fixed;
               top: 0;
           }

           .el-menu {
               background: #0e0e0e;
           }

           .el-menu.el-menu--horizontal {
               border: 0px;
           }

           .header_con_ {
               width: 84%;
               height: 67px;
               margin: 19px auto;
           }

           .list_href {
               width: 280px;
               height: 130px;
               background: #333333;
           }

           .img_div {
               width: 40px;
               height: 40px;
               background: #FFF;
               overflow: hidden;
               border-radius: 50%;
               margin-left: 27px;
           }

           .Images_ {
               width: 40px;
               height: 40px;
           }

           .list_href_con {
               display: flex;
               align-items: center;
               margin-top: 16px;
           }

           .text_all_ {
               width: 80%;
               margin: 0 auto;
               font-size: 13px;
               color: #fff;
               margin-top: 15px;
           }

           .list_href {
               margin-right: 20px;
               margin-bottom: 20px;
           }

           .h4_ {
               color: #FFF;
               width: 100%;
           }

           .span_Title {
               width: 90px;
               display: inline-block;
               text-align: center;
               border-left: 6px solid #169BD5;
               margin-bottom: 30px;
           }
       </style>
   </head>

                           <el-menu-item index="1">处理中心</el-menu-item>
                           <el-submenu index="2">
                               <template slot="title">我的工作台</template>
                               <el-menu-item index="2-1">选项1</el-menu-item>
                               <el-menu-item index="2-2">选项2</el-menu-item>
                               <el-menu-item index="2-3">选项3</el-menu-item>
                               <el-submenu index="2-4">
                                   <template slot="title">选项4</template>
                                   <el-menu-item index="2-4-1">选项1</el-menu-item>
                                   <el-menu-item index="2-4-2">选项2</el-menu-item>
                                   <el-menu-item index="2-4-3">选项3</el-menu-item>
                               </el-submenu>
                           </el-submenu>
                           <el-menu-item index="3">消息中心</el-menu-item>
                           <el-menu-item index="4">
                               <a href="###" target="_blank">订单管理</a>
                           </el-menu-item>
                           <el-menu-item index="5">消息中心</el-menu-item>
                           <el-menu-item index="6">消息中心</el-menu-item>
                           <el-menu-item index="7">消息中心</el-menu-item>
                           <el-menu-item index="8">消息中心</el-menu-item>
                           <el-menu-item index="9">消息中心</el-menu-item>

                       </el-menu>
                   </div>
               </div>

<el-container style="padding-top: 120px;">
<el-main>

                       <div class="content_list" style="display: flex;">
                           <div class="h4_"><span class="span_Title">每日一览</span></div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                       </div>
                       <div class="content_list" style="display: flex;">
                           <div class="h4_"><span class="span_Title">学习提升</span></div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                       </div>
                       <div class="content_list" style="display: flex;">
                           <div class="h4_"><span class="span_Title">采集灵感</span></div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                       </div>
                       <div class="content_list" style="display: flex;">
                           <div class="h4_"><span class="span_Title">研究所得</span></div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                       </div>
                       <div class="content_list" style="display: flex;">
                           <div class="h4_"><span class="span_Title">交互设计</span></div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                       </div>
                       <div class="content_list" style="display: flex;">
                           <div class="h4_"><span class="span_Title">设计团队</span></div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                       </div>
                       <div class="content_list" style="display: flex;">
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

<div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                       </div>
                       
                   </el-main>
               </el-container>

           </div>
           <el-tabs :tab-position="tabPosition" style="height: 480px;color: #FFF;" class="menus_left_list" v-model="editableTabsValue" @tab-click="handleClick">
               <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                   {{item.content}}
               </el-tab-pane>
           </el-tabs>
       </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
       
       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
       <script src="http://mockjs.com/dist/mock.js"></script>
       <script type="text/javascript">
           const vm = new Vue({ // 配置对象 options
               // 配置选项(option)
               el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
               data: {
                   tabPosition: "left",
                   activeIndex: '1',
                   editableTabsValue: "0",
                   offset: [],
                   scroll: '',
                   editableTabs: [{
                           title: '每日一览',
                           name: '0',
                       },
                       {
                           title: '学习提升',
                           name: '1',
                       },
                       {
                           title: '采集灵感',
                           name: '2',
                       },
                       {
                           title: '研究所得',
                           name: '3',
                       },
                       {
                           title: '交互设计',
                           name: '4',
                       },
                       {
                           title: '设计团队',
                           name: '5',
                       },
                       {
                           title: '字体设计',
                           name: '6',
                       },
                       {
                           title: '教你配色',
                           name: '7',
                       },
                       {
                           title: '图标推荐',
                           name: '8',
                       },
                       {
                           title: '商业图库',
                           name: '9',
                       },
                       {
                           title: '素材资源',
                           name: '10',
                       },
                       {
                           title: '数据可视化',
                           name: '11',
                       }
                   ],
                   list: [{
                       name: "第一条",
                       backgroundcolor: "#90B2A3"
                   }, {
                       name: "第二条",
                       backgroundcolor: "#A593B2"
                   }, {
                       name: "第三条",
                       backgroundcolor: "#A7B293"
                   }, {
                       name: "第四条",
                       backgroundcolor: "#0F2798"
                   }, {
                       name: "第五条",
                       backgroundcolor: "#0A464D"
                   }],
               },
               methods: {
                   handleClick(tab, event) {
                       this.jump(tab.index)
                   },
                   jump(index) {
                       let jump = document.getElementsByClassName('content_list');
                       // 获取需要滚动的距离
                       let total = jump[index].offsetTop - 113;
                       // Chrome
                       document.body.scrollTop = total;
                       // Firefox
                       document.documentElement.scrollTop = total;
                       // Safari
                       window.pageYOffset = total;
                       // $('html, body').animate({
                       // 'scrollTop': total
                       // }, 400);
                   },
                   dataScroll: function() {
                       this.scroll = document.documentElement.scrollTop || document.body.scrollTop;

                   },
                   loadScroll: function() {
                       this.editableTabsValue = "0"
                       var self = this;
                       var sections = document.getElementsByClassName('content_list');
                       for(var i = sections.length - 1; i >= 0; i--) {
                           if(self.scroll >= sections[i].offsetTop - 183) {
                               console.log(self.scroll)
                               this.editableTabsValue = i.toString()
                               break;
                           }
                       }
                   }

               },
               watch: {
                   //监听scroll变量，只要滚动条位置变化就会执行方法loadScroll
                   scroll: function() {
                       this.loadScroll()
                   }
               },
               mounted() {
                   // scroll代表滚动条距离页面顶部距离

                   //   list.forEach((itme)=>{
                   //       this.offset.push(itme.offset().top)
                   //   })
                   //   console.log(this.offset)
                   window.addEventListener('scroll', this.dataScroll);
               }
           })
       </script>

</body>

</html>

码农公寓

相关文章