zoukankan      html  css  js  c++  java
  • jq-demo-2种吸顶效果

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <style>
     7             #box2 {
     8                  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                  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>
  • 相关阅读:
    休息一会。。。。。。
    iPhone开发之webview 拖动和显示本地图片的几组代码
    Android 防止手机休眠
    Android数据存储SQLite 事务操作
    解决png图片在IE6下的透明问题
    教你如何在博客园放“可运行"代码
    弹出层原理
    右键集成JS文件压缩 YUI Compressor
    原来window.event快达到全浏览器支持了
    QWrap入门指南
  • 原文地址:https://www.cnblogs.com/1032473245jing/p/7504979.html
Copyright © 2011-2022 走看看