pc端侧边栏

一、效果图

首页面效果图

其他页面效果图

二、代码

<template>
	<div>
		<div class="right_aside" id="menu" :style="{'top':(fromPages == 'activity' ? '45%' : fromPages == 'newActivity' ? newActivityTop : '')}">
	       <ul class="menu_list" v-if="fromPages == 'home'">
	          <li v-for="item in asideList" :key="item.id"><a>{{item.name}}</a></li>
	       </ul>
	       <ul class="public_list">
	         <li><a  @click="toSuggest">
	            <img class="initial" src="@/assets/img/icons/fankui.png" alt="">
	            <img class="choosed" src="@/assets/img/icons/fankuichoosed.png" alt="">
	            <span>反馈</span>
	            <!-- <div class="showTips suggest strokeDiv"><span class="triangle"></span>建议反馈</div> -->
	          </a></li>
	          <li><a>
	            <img class="initial" src="@/assets/img/icons/kefu.png" alt="">
	            <img class="choosed" src="@/assets/img/icons/kefuchoosed.png" alt=""> 
	            <span>电话</span>
	            <div class="showTips phone"><span class="triangle"></span>1234567892</div>
	          </a></li>
	          <li class="last"><a>
	            <img class="initial" src="@/assets/img/icons/back_to_top.png" alt="">
	            <img class="choosed" src="@/assets/img/icons/back_to_top_choosed.png" alt="">
	            <span>顶部</span>
	          </a></li>
	       </ul>
	   </div>
	   <div>
	   		<div class="Louti">楼层一</div>
	   		<div class="Louti">楼层二</div>
	   <div>
	</div>
</template>
<script>
import $ from 'jquery'
import store from "@/store/index"
export default {
  data() {
    return {
        asideList:[
          {
            id:'10001',
            name:'楼层一'
          },
          {
            id:'10002',
            name:'楼层二'
          },
        ],
        newActivityTop:'80%',
        scrollTop:''
    };
  },
  props:{
    fromPages:null
  },
  computed: {
      loginName:function(){
          return  store.getters.getUserName;
      }
  },
  mounted(){
    this.hoverStyle()
    this.floorStyle()
    
    if(this.fromPages == 'home'){
      $('.menu_list li').eq(0).addClass("on")
    }else{
      $('.public_list li').eq(0).addClass("on")
      $('.public_list li').eq(0).children("a").children(".initial").css("display","none")
      $('.public_list li').eq(0).children("a").children(".choosed").css("display","block")
    }
  },
  methods: {
    //鼠标划过样式
    hoverStyle(){
      $('.right_aside ul li').mouseenter(function(){
        $(this).addClass("on").siblings("li").removeClass("on");
        $(this).parent().siblings().children('li').removeClass("on")

        $(this).children("a").children(".showTips").css({"display":"block","color":"#333333"})
        $(this).children("a").children(".initial").css("display","none")
        $(this).children("a").children(".choosed").css("display","block")
        
        $(this).siblings("li").children("a").children(".showTips").css("display","none")
        $(this).siblings("li").children("a").children(".initial").css("display","block")
        $(this).siblings("li").children("a").children(".choosed").css("display","none")
      })
      $('.right_aside').mouseleave(function () { 
        $(this).children('ul').eq(1).children('li').children('a').children('.showTips').css("display","none")
        $(this).children('ul').eq(1).children('li').children('a').children('.initial').css("display","block")
        $(this).children('ul').eq(1).children('li').children('a').children('.choosed').css("display","none")
        $(this).children('ul').children('li').removeClass("on")

        $(this).children('ul').eq(0).children('li').eq(0).addClass("on")
        $(this).children('ul').eq(0).children('li').eq(0).children("a").children(".initial").css("display","none")
        $(this).children('ul').eq(0).children('li').eq(0).children("a").children(".choosed").css("display","block")
      })
    },

    //楼梯效果
    floorStyle(){
      $('.menu_list li').eq(0).addClass("on")
      var flag = true; //控制 当点击楼层号时，禁止滚动条的代码执行   值为true时，可以执行滚动条代码
      //  根据楼层号 控制滚走的距离  
      // 1、除了top的楼梯号，为每一个楼梯号添加一个click，控制楼梯滚走的距离（距离：当前楼层的offset().top ）
      $("#menu .menu_list li").click(function() {
          flag = false;
          //当前点击的楼号为蓝色
          $(this).addClass("on").siblings('li').removeClass("on");
          
          //获取当前楼号对应楼层的 top值
          var sTop = $(".Louti").eq($(this).index()).offset().top;

          //将页面滚走的距离设置为  sTop  
          $("body,html").animate({
              "scrollTop": sTop
          }, 1000, function() {
              flag = true;
          });
      })
      //2、点击top   回到顶部
      $("#menu .public_list li:last").click(function() {
          $("body,html").animate({
              "scrollTop": 0
          }, 1000);
          $("#menu .menu_list li").removeClass("on");
      })

      //3、 滚动条滚动 --  找到当前楼层的索引    控制楼层号
      $(window).scroll(function() {
          //如果flag  为true   可以执行滚动条的代码
          if (flag) {
              //获取页面滚走的距离
              var sTop = $(document).scrollTop();
              //filter  返回满足条件的那个对象 
              //找到满足某个条件的楼层对象    
              var floor = $(".Louti").filter(function(index, ele) {
                  return Math.abs($(this).offset().top - sTop) < $(this).height();
              })
              // console.log(floor)
              // console.log(floor.index())
              //根据楼层的索引 设置楼梯号的 样式
              if(floor.index()<0){
                $("#menu .menu_list li").eq(0).addClass("on").siblings('li').removeClass("on");
              }else{
                 $("#menu .menu_list li").eq(floor.index()).addClass("on").siblings('li').removeClass("on");
              }
          }
      })
    },
  },
};
</script>
<style>
ul{
  padding: 0;
  margin: 0;
}
ul li{
  list-style: none;
  padding: 0;
  cursor: pointer;
}
a{
  text-decoration: none;
  color: #666666;
}
.right_aside{
  width: 54px;
  background: #FFFFFF;
  border-radius: 2px;
  position: fixed;
  top: 30%;
  right: 230px;
  box-shadow: 0 0 10px 0px #eeeeee;
}
.right_aside ul li{
  border-bottom: 1px solid #F3F3F3;
  position: relative;
}
.right_aside .public_list li:last-child{
  border-bottom: 0px solid #F3F3F3;
}
.right_aside ul li a{
  width: calc(100% - 28px);
  display: block;
  padding: 14px;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 16px;
}
.right_aside ul li a img{
  width: 15px;
  height: 15px;
  margin-left: 5px;
}
.right_aside ul li.on a{
  background-color:  #2379EF;;
  color: #FFFFFF;
}
</style>
<style scoped>
.showTips{
  display: none;
  padding: 10px 10px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  position: absolute;
  top: 12px;
}
.choosed{
  display: none;
}
.suggest{
  left: -80px;
}
.phone{
   left: -105px;
}
.triangle{
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 5px solid #ffffff;
  border-bottom: 5px solid transparent;
  position: absolute;
  right: -5px;
  top: 12px;
}
</style>

总结

使用过程中样式可能需要调整，代码中没有 class 名为 Louti 的样式，根据自己的实际需求来写就行！