• 滚动页面时DIV到达顶部时固定在顶部


    本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部。在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm

    下面是代码:

    <body style="margin:0px;">
    <div style="height:300px;background:#e0e0e0"></div>
    <div id="fixedMenu_keleyi_com" style="background:#ffffff;100%;"><ul><li><a 

    href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a></li>
    <li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li>
    <li><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li>
    <li><a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li>
    <li><a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a></li>
    <li><a href="http://www.keleyi.com/" target="_blank">首页</a></li></ul>
    </div>
    <div style="height:2600px;background:#999"></div>
    <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var ie6 = document.all;
    var dv = $('#fixedMenu_keleyi_com'), 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>
    </body>

    这个效果还有新版本的实现:http://www.keleyi.com/a/bjac/5d7f4ac2efa72d30.htm

    本文转自柯乐义:http://www.keleyi.com/a/bjac/ed5eb8c2959c619e.htm

  • 相关阅读:
    CSAPP bomb实验
    CSAPP y8664实验
    Linux的find基础使用
    redis学习
    cookie
    JavaScript技巧
    如何在网页中使用响应式图像
    10 个常用的 JS 工具库,80% 的项目都在用!
    Vue自定义指令
    巧用 CSS 实现动态线条 Loading 动画
  • 原文地址:https://www.cnblogs.com/jihua/p/3087954.html
Copyright © 2020-2023  润新知