吸顶动画侧边栏监听滚动条位置监听元素距离顶部高度

需求：当页面中某一标签到达页面顶部时，固定在页面上，否则随页面一起滚动，看下边效果图。

实现思路：

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不然的话当左边菜单固定时，右边会跑到左边来，布局会乱的。

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

本文链接：https://www.cnblogs.com/yushihao/p/11771355.html

吸顶动画侧边栏监听滚动条位置监听元素距离顶部高度

吸顶动画侧边栏监听滚动条位置监听元素距离顶部高度的更多相关文章

随机推荐

热门专题

目录导航

吸顶动画 侧边栏 监听滚动条位置 监听元素距离顶部高度

吸顶动画 侧边栏 监听滚动条位置 监听元素距离顶部高度的更多相关文章

随机推荐

热门专题

目录导航

吸顶动画侧边栏监听滚动条位置监听元素距离顶部高度

吸顶动画侧边栏监听滚动条位置监听元素距离顶部高度的更多相关文章