jq-demo-2种吸顶效果

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
             #box2 {
                 width: 100%;
                 height: 60px;
                 background: rgba(222,222,100, 0.6);
             }
         </style>
         <script src="js/jquery-1.12.3.js"></script>
         <script>
             $(function(){

                 var box2Top = $("#box2").offset().top;
                 console.log(box2Top);

                 //页面滚动
                 $(window).scroll(function(){
                     var scrollTop = $(window).scrollTop();

                     if (scrollTop >= box2Top) {
                         $("#box2").css({"position": "fixed", top:0}); //固定定位
                     }
                     else {
                         $("#box2").css({position: "static"});
                     }

                 })

             })
         </script>
     </head>
     <body>
         <div id="box1">box1
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
         </div>
         <div id="box2">box2</div>
         <div id="box3"> box3
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
         </div>
     </body>
 </html>

效果2

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
             #box3 {
                 width: 100%;
                 height: 60px;
                 background: rgba(222,222,100, 0.6);
                 position: fixed;
                 top: 0;
                 display: none;
             }
         </style>
         <script src="js/jquery-1.12.3.js"></script>
         <script>
             $(function(){

                 $(window).scroll(function(){
                     var scrollTop = $(window).scrollTop();

                     if ( scrollTop >= $("#box2").offset().top ) {
                         $("#box3").fadeIn(); //淡入
                     }
                     else {
                         $("#box3").fadeOut(); //淡出
                     }
                 })

             })
         </script>
     </head>
     <body>
         <div id="box1">box1
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
         </div>
         <div id="box2">box2
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
             <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
         </div>
         <div id="box3">box3</div>
     </body>
 </html>