zoukankan      html  css  js  c++  java

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

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

    实现思路：

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


    我是前端菜鸡儿，不明白的可以跟我留言哦。
  • 相关阅读:
    用VS Code写C++程序如何运行
    DRF
    DRF
    DRF
    DRF
    DRF
    DRF
    DRF
    DRF
    DRF
  • 原文地址：https://www.cnblogs.com/yushihao/p/11771355.html
Copyright © 2011-2022 走看看