zoukankan      html  css  js  c++  java
  • jquery:当页面滚动到一定位置之后,让元素固定在顶部,小于位置后恢复原来的位置

    <!DOCTYPE html>
    <html>
    <head>
    <script src="manger/js/jquery-1.4.4.min.js"></script>
    <style type="text/css">
    *{margin:0;padding:0;} .box{height:30px;background:burlywood;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>
  • 相关阅读:
    【Office Web Apps】在 SharePoint 中使用 Office Web Apps
    css轮廓
    css定位
    css盒子模型 css3盒子相关样式
    css常用操作
    css3选择器
    强制换行和禁止换行
    text-transform 字母的大小写
    css hack
    JavaScript基本语法
  • 原文地址:https://www.cnblogs.com/sarly/p/7483726.html
Copyright © 2011-2022 走看看