jq-demo-2种吸顶效果

最新推荐文章于 2021-11-20 10:54:54 发布

转载最新推荐文章于 2021-11-20 10:54:54 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1032473245jing/p/7504979.html

本文介绍如何使用JavaScript和jQuery实现当滚动条滚动到特定位置时，网页元素的定位变化及淡入淡出效果。具体包括获取元素位置、监听滚动事件并调整元素样式。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             #box2 {
 8                 width: 100%;
 9                 height: 60px;
10                 background: rgba(222,222,100, 0.6);
11             }
12         </style>
13         <script src="js/jquery-1.12.3.js"></script>
14         <script>
15             $(function(){
16                 
17                 var box2Top = $("#box2").offset().top;
18                 console.log(box2Top);
19                 
20                 //页面滚动
21                 $(window).scroll(function(){
22                     var scrollTop = $(window).scrollTop();
23                                         
24                     if (scrollTop >= box2Top) {
25                         $("#box2").css({"position": "fixed", top:0}); //固定定位
26                     }
27                     else {
28                         $("#box2").css({position: "static"});
29                     }
30                     
31                 })
32                 
33             })
34         </script>
35     </head>
36     <body>
37         <div id="box1">box1
38             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
39             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
40             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
41             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
42             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
43         </div>
44         <div id="box2">box2</div>
45         <div id="box3"> box3
46             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
47             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
48             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
49             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
50             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
51         </div>
52     </body>
53 </html>

效果2

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             #box3 {
 8                 width: 100%;
 9                 height: 60px;
10                 background: rgba(222,222,100, 0.6);
11                 position: fixed;
12                 top: 0;
13                 display: none;
14             }
15         </style>
16         <script src="js/jquery-1.12.3.js"></script>
17         <script>
18             $(function(){
19                 
20                 $(window).scroll(function(){
21                     var scrollTop = $(window).scrollTop();
22                     
23                     if ( scrollTop >= $("#box2").offset().top ) {
24                         $("#box3").fadeIn(); //淡入
25                     }
26                     else {
27                         $("#box3").fadeOut(); //淡出
28                     }
29                 })
30                 
31             })
32         </script>
33     </head>
34     <body>
35         <div id="box1">box1
36             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
37             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
38             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
39             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
40             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
41         </div>
42         <div id="box2">box2
43             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
44             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
45             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
46             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
47             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
48         </div>
49         <div id="box3">box3</div>
50     </body>
51 </html>

转载于:https://www.cnblogs.com/1032473245jing/p/7504979.html