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

    <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>

    注:http://www.coding123.net/js/jquery.js最好换成本地的js文件:jquery-1.4.2.js,不换的话,当www.coding.net打不开时,引用此域名的网站会出现内容无法加载的情况。

  • 相关阅读:
    Java知识系统回顾整理01基础02面向对象03方法
    可插件化拓展改造器 slot-maven-plugin
    数据治理框架
    Java读写hdfs上的avro文件
    FTPClient的使用
    Java读写hdfs上的avro文件
    图片上传预览
    css hack 用法注意
    获取get请求后面的参数
    js全局变量污染
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061534.html
Copyright © 2011-2022 走看看