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>
  • 相关阅读:
    对SpringIOC、AOP的理解
    Java后台与VUE跨域交接
    贼简单的Shiro框架之粗粒度控制菜单栏
    Json
    Spring MVC小DEMO
    面试问题
    多线程理解
    了解java语言
    单点登录如何设计
    进程的创建和调度分析
  • 原文地址:https://www.cnblogs.com/acm-bingzi/p/div-fixed.html
Copyright © 2011-2022 走看看