div冻结效果

讓丄帝愛伱

已于 2023-06-06 15:54:27 修改

阅读量479

点赞数

文章标签： css html jquery js html5

于 2021-01-09 16:36:00 首次发布

本文链接：https://blog.csdn.net/ximaiyao1984/article/details/120287076

版权

$("DIV").css({ "top":100px})

<div class="box">
   <div class="info"></div>
</div>

var sTop = 0;

//$('.box').scroll(function() {
$(window).scroll(function() {
     sTop = $(this).scrollTop();
     oInfo.text(sTop + '-' + oTop); //这一句 只是为了看看数据 没有多大的用处
     if (sTop >= oTop) {
         $(".box").css({ "position": "fixed", "top": "110px" });
     } else {
         $(".box").css({ "position": "static" });
     }
});

<!DOCTYPE html>
<html>
   <head>
      <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
      <style type="text/css">
         *{margin:0;padding:0;} .box{height:30px;background:burlywood;width:100%;}
      </style>
   </head>
   <body>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>
      
       <div class="box">
         <div class="info"></div>
       </div>


      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>


      <script type="text/javascript">
            var oInfo = $(".info");
            var oTop = $(".box").offset().top;
            var sTop = 0;
            $(window).scroll(function(){
                sTop = $(this).scrollTop();
                oInfo.text('sTop:'+sTop + '==oTop:' + oTop);
                if(sTop >= oTop){
                    $(".box").css({"position":"fixed","top":"0"});
                }else{
                    $(".box").css({"position":"static"});
                }
            });
      </script>


   </body>
</html>