zoukankan      html  css  js  c++  java
  • 导航栏滚动到顶部后固定

    导航栏滚动到顶部后固定

    http://blog.csdn.net/moqiang02/article/details/17995033

    <div style="height:500px;background:#999"></div>  
    <div id="fixedMenu" style="background:#eee;100%;">MENU</div>  
    <div style="height:1900px;background:#999"></div>  
    <script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>  
    <script type="text/javascript">  
        $(function () {  
            var ie6 = /msie 6/i.test(navigator.userAgent)  
            , dv = $('#fixedMenu'), st;  
            dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离  
            $(window).scroll(function () {  
                st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);  
                if (st >= parseInt(dv.attr('otop'))) {  
                    if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果  
                        dv.css({ position: 'absolute', top: st });  
                    }  
                    else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });  
                } else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });  
            });  
        });  
          
    </script> 
    
  • 相关阅读:
    ExtJs 4.0 ExtJs2.2 JavaScript
    C++中关于classview、resourceview、fileview
    BIN OBJ 区别
    数据编码
    多线程
    REST
    SQL Server 2005安装
    临时
    数据存储
    灰度直方图
  • 原文地址:https://www.cnblogs.com/wancy86/p/6002605.html
Copyright © 2011-2022 走看看