zoukankan      html  css  js  c++  java
  • 导航条固定在顶部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mini导航条</title>
    
    <style type="text/css">
    /*css reset*/
    html{_background-image:url(n1othing.txt);/*解决IE6下固定条颤抖问题*/}
    body, lu, li, p{
        padding: 0;
        margin: 0;
    }
    div{ display:block;}
    lu, li{list-style: none;}
    
    
    .header {
        background: #666;
        height: 800px;
    }
    .footer {
        height: 10000px;
        background: #09C;
    }
    
    
    .min_nav{ width:1000px; height:40px; margin:0 auto; background:#C30; clear:both;}
    .ie7_bug{ text-align:left;}
    
    .postion {
        /*position: relative;*/ width:100%;
    }
    .fix {
        position: fixed;
        _position: absolute;
        _top:expression(documentElement.scrollTop);
        top: 0;
        z-index: 10;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        //var position_top=$('.bd').position();
        
        var offset_top=$('.postion').offset();
        var scrollTop_top=$('.postion').scrollTop();
    
     window.onscroll = function () {
            if ($(document).scrollTop() > offset_top.top) {
                $('.postion').addClass('fix');
            }
            else {
                $('.postion').removeClass('fix');
            }
        }        
     });
    </script>
    </head>
    
    <body>
    <div class="header">
      <ul>
        <li>aaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaaa</li>
      </ul>
    </div>
    
    <div class="postion">
        <div class="min_nav">
            <p>获取匹配元素相对父元素的偏移。</p>
            <p>返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。</p>
          </div>
    </div>
    
    <div class="footer"></div>
    </body>
    </html>
  • 相关阅读:
    spring原理
    mybatis原理
    数据结构与算法
    JVM内存模型及垃圾回收算法
    dorado动态修改数据验证
    dorado在dialog中使用js通过控件id修改控件值,值闪烁一下消失问题
    由于;引发的Oracle的BadSqlExecption
    swagger配置
    SpringBoot整合mybatis碰到的问题
    关于浏览器的自动缓存问题
  • 原文地址:https://www.cnblogs.com/csdttnk/p/3192738.html
Copyright © 2011-2022 走看看