需求：當頁面中某一標籤到達頁面頂部時，固定在頁面上，否則隨頁面一起滾動，看下邊效果圖。

實現思路：

1.監聽滾動條移動事件。

2.獲取標籤距離頂部距離。

3.當滾動條滾動距離大於標籤距離頂部距離時，固定標籤在某一位置。

具體步驟：

1.首先監聽滾動條事件

window.addEventListener("scroll", this.handleScroll);

放在頁面mounted生命週期中。

2.獲取滾動條滾動位置及標籤距離頂部距離

 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//獲取去滾動條位置
 let offsetTop = document.querySelector("#center_box_lefts").offsetTop;//獲取標籤距離頂部位置

3.定義this.handleScroll方法，在方法中做判斷處理。

handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let offsetTop = document.querySelector("#center_box_lefts").offsetTop;
      scrollTop > 480 && scrollTop > offsetTop
        ? (this.searchBarFixed = true)
        : (this.searchBarFixed = false);
    }

4.定義變數，如果符合條件為true否則為false。

 searchBarFixed: "",//側邊導航吸頂

5.動態設定 :class，如果為true則設定為固定定位，否則隨頁面滾動。

  :class="searchBarFixed?('center_box_left_fxide'):('center_box_left')"

6.設定css樣式

隨頁面滾動樣式：

 1   .center_box_left {
 2     width: 230px;
 3     background-color: #ffffff;
 4     display: flex;
 5     flex-direction: column;
 6     align-items: center;
 7     span {
 8       display: block;
 9       width: 170px;
10       height: 54px;
11       line-height: 54px;
12       font-family: MicrosoftYaHei;
13       font-size: 18px;
14       font-weight: normal;
15       font-stretch: normal;
16       letter-spacing: 0px;
17       color: #055caa;
18       border-bottom: 1px solid #dddddd;
19       text-indent: 43px;
20     }
21     span:first-child {
22       text-indent: 0px;
23       width: 240px;
24       margin-left: 10px;
25       height: 78px;
26       font-family: MicrosoftYaHei-Bold;
27       font-size: 24px;
28       font-weight: normal;
29       font-stretch: normal;
30       letter-spacing: 0px;
31       color: #ffffff;
32       text-align: center;
33       background-image: url(../assets/ysh_bunner.png);
34       background-size: 100% 100%;
35       line-height: 68px;
36       border: none;
37       padding: 0;
38     }
39     span:last-child {
40       border: none;
41       padding-bottom: 20px;
42     }
43   }

吸頂樣式

 1  .center_box_left_fxide {
 2     position: fixed;
 3     top: 0;
 4     width: 230px;
 5     background-color: #ffffff;
 6     display: flex;
 7     flex-direction: column;
 8     align-items: center;
 9     span {
10       display: block;
11       width: 170px;
12       height: 54px;
13       line-height: 54px;
14       font-family: MicrosoftYaHei;
15       font-size: 18px;
16       font-weight: normal;
17       font-stretch: normal;
18       letter-spacing: 0px;
19       color: #055caa;
20       border-bottom: 1px solid #dddddd;
21       text-indent: 43px;
22     }
23     span:first-child {
24       text-indent: 0px;
25       width: 240px;
26       margin-left: 10px;
27       height: 78px;
28       font-family: MicrosoftYaHei-Bold;
29       font-size: 24px;
30       font-weight: normal;
31       font-stretch: normal;
32       letter-spacing: 0px;
33       color: #ffffff;
34       text-align: center;
35       background-image: url(../assets/ysh_bunner.png);
36       background-size: 100% 100%;
37       line-height: 68px;
38       border: none;
39       padding: 0;
40     }
41     span:last-child {
42       border: none;
43       padding-bottom: 20px;
44     }
45   }

這裡吸頂樣式我是用的是 position: fixed; 佈局。

下面我把完整程式碼附上：

  1 <template>
  2   <div class="teachingStaff">
  3     <div class="banner">
  4       <img src="../assets/banner2.png" alt style="width:100%;height:100%" />
  5     </div>
  6     <div class="center_box">
  7       <div>
  8         <div
  9           :class="searchBarFixed?('center_box_left_fxide'):('center_box_left')"
 10           id="center_box_lefts"
 11         >
 12           <span v-for="(item,index) in tab_list" :key="index">{{item.title}}</span> 
 13         </div>
 14       </div>
 15       <div class="center_box_right"></div>
 16     </div>
 17   </div>
 18 </template>
 19 
 20 <script>
 21 export default {
 22   name: "teachingStaff",
 23   data() {
 24     return {
 25       searchBarFixed: "",//側邊導航吸頂
 26       tab_list:[
 27         {
 28           title:"師資隊伍",
 29           val:""
 30         },
 31         {
 32           title:"院士",
 33           val:""
 34         },
 35         {
 36           title:"傑出教師",
 37           val:""
 38         }
 39       ],//側邊資料
 40 
 41     };
 42   },
 43   mounted() {
 44     window.addEventListener("scroll", this.handleScroll);
 45   },
 46   methods: {
 47     handleScroll() {
 48       let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 49       let offsetTop = document.querySelector("#center_box_lefts").offsetTop;
 50       scrollTop > 480 && scrollTop > offsetTop
 51         ? (this.searchBarFixed = true)
 52         : (this.searchBarFixed = false);
 53     }
 54   },
 55   destroyed() {
 56     window.removeEventListener("scroll", this.handleScroll);
 57   }
 58 };
 59 </script>
 60 
 61 <style lang="scss" scoped>
 62 * {
 63   margin: 0;
 64   padding: 0;
 65 }
 66 .teachingStaff {
 67   background: #f2f2f2;
 68   width: 100%;
 69   min-height: 963px;
 70 }
 71 .banner {
 72   min-width: 1200px;
 73   height: 400px;
 74   background-color: #ededed;
 75 }
 76 .center_box {
 77   width: 1200px;
 78   margin: auto;
 79   display: flex;
 80   justify-content: space-between;
 81   align-items: flex-start;
 82   .center_box_left_fxide {
 83     position: fixed;
 84     top: 0;
 85     width: 230px;
 86     background-color: #ffffff;
 87     display: flex;
 88     flex-direction: column;
 89     align-items: center;
 90     span {
 91       display: block;
 92       width: 170px;
 93       height: 54px;
 94       line-height: 54px;
 95       font-family: MicrosoftYaHei;
 96       font-size: 18px;
 97       font-weight: normal;
 98       font-stretch: normal;
 99       letter-spacing: 0px;
100       color: #055caa;
101       border-bottom: 1px solid #dddddd;
102       text-indent: 43px;
103     }
104     span:first-child {
105       text-indent: 0px;
106       width: 240px;
107       margin-left: 10px;
108       height: 78px;
109       font-family: MicrosoftYaHei-Bold;
110       font-size: 24px;
111       font-weight: normal;
112       font-stretch: normal;
113       letter-spacing: 0px;
114       color: #ffffff;
115       text-align: center;
116       background-image: url(../assets/ysh_bunner.png);
117       background-size: 100% 100%;
118       line-height: 68px;
119       border: none;
120       padding: 0;
121     }
122     span:last-child {
123       border: none;
124       padding-bottom: 20px;
125     }
126   }
127   .center_box_left {
128     width: 230px;
129     background-color: #ffffff;
130     display: flex;
131     flex-direction: column;
132     align-items: center;
133     span {
134       display: block;
135       width: 170px;
136       height: 54px;
137       line-height: 54px;
138       font-family: MicrosoftYaHei;
139       font-size: 18px;
140       font-weight: normal;
141       font-stretch: normal;
142       letter-spacing: 0px;
143       color: #055caa;
144       border-bottom: 1px solid #dddddd;
145       text-indent: 43px;
146     }
147     span:first-child {
148       text-indent: 0px;
149       width: 240px;
150       margin-left: 10px;
151       height: 78px;
152       font-family: MicrosoftYaHei-Bold;
153       font-size: 24px;
154       font-weight: normal;
155       font-stretch: normal;
156       letter-spacing: 0px;
157       color: #ffffff;
158       text-align: center;
159       background-image: url(../assets/ysh_bunner.png);
160       background-size: 100% 100%;
161       line-height: 68px;
162       border: none;
163       padding: 0;
164     }
165     span:last-child {
166       border: none;
167       padding-bottom: 20px;
168     }
169   }
170   .center_box_right {
171     width: 950px;
172     min-height: 800px;
173     background-color: #ffffff;
174   }
175 }
176 </style>

注意：頁面中標紅位置，一定要給外層套一個div不然的話當左邊選單固定時，右邊會跑到左邊來，佈局會亂的。

我是前端菜雞兒，不明白的可以跟我留言哦。

&n