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

最新推荐文章于 2024-06-05 11:15:38 发布

weixin_34393428

最新推荐文章于 2024-06-05 11:15:38 发布

阅读量1.5k

点赞数

文章标签： javascript ViewUI

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;width: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>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34393428

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS 实现DIV 滚动至顶部后固定

JS 实现DIV 滚动至顶部后固定&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;DIV滚动至顶部后固定&lt;/title&gt;&lt;/head&gt;&lt;body style="heig
复制链接

扫一扫