zoukankan      html  css  js  c++  java
  • JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>DIV滚动至顶部后固定</title>
    </head>
    <body style="height:2000px;">
    <div style="height: 200px"></div>
    <div id="nav_keleyi_com" style="position:relative;top:0;background:#00f;100px; height:100px">
      Test Div
    </div>
    <script type="text/javascript">
      function menuFixed(id) {
        var obj = document.getElementById(id);
        var _getHeight = obj.offsetTop;
    
        window.onscroll = function () {
          changePos(id, _getHeight);
        }
      }
    
      function changePos(id, height) {
        var obj = document.getElementById(id);
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < height) {
          obj.style.position = 'relative';
        } else {
          obj.style.position = 'fixed';
        }
      }
      window.onload = function () {
        menuFixed('nav_keleyi_com');
      }
    </script>
    </body>
  • 相关阅读:
    java.io.Serializable浅析
    SSH和SSM的区别
    [转]github详细教程
    GITHUB的使用
    常用端口-小结
    DNS的解析原理
    windows快捷键-小结
    ip地址0.0.0.0是什么意思
    windows插件框架下载地址
    redis和mongodb
  • 原文地址:https://www.cnblogs.com/acm-bingzi/p/div-fixed.html
Copyright © 2011-2022 走看看