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>

JS 实现DIV 滚动至顶部后固定的更多相关文章

  1. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  2. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  3. js实例--js滚动条缓慢滚动到顶部

    收集篇(已测)-- <html><head> <script type="text/javascript"> var currentPositi ...

  4. div滚动到页面顶端后固定住

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

  6. JS DIV列表自动滚动带停顿，滚动到底部后自动滚动到顶部

    setInterval -- 间隔执行函数:element.scrollTop -- 元素滚动条距头部的距离: 因为执行代码需要时间,所以最终动态时间会比设置的要慢 var slide = new S ...

  7. 一款基于jquery滑动后固定于顶部的导航

    之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预 ...

  8. scrollTop如何实现click后页面过渡滚动到顶部

    用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...

  9. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

随机推荐

  1. 便于记忆的SA构造

    首先学习基数排序. memset(b, 0, sizeof(b)); for(int i = 0; i < n; i++) b[a[i]]++; for(int i = 1; i <= m ...

  2. Deflation Methods for Sparse PCA

    目录 背景 总括 Hotelling's deflation 公式 特点 Projection deflation 公式 特点 Schur complement deflation Orthogona ...

  3. Division and Union CodeForces - 1101C （排序后处理）

    There are nn segments [li,ri][li,ri] for 1≤i≤n1≤i≤n. You should divide all segments into two non-emp ...

  4. js tool 方法之删除数组指定项

    最近又开始写博文了,还是在自己的本地项目上做一些小的方法案例. 之前撸代码的时候总是遇到删除数组里某个元素的问题,JS没提供便捷的方法,只能自己写个循环处理,所幸自己写个方法,以后博客项目里要用到就不 ...

  5. Mysql MyISAM与InnoDB 表锁行锁以及分库分表优化

    一. 两种存储引擎:MyISAM与InnoDB 区别与作用 1. count运算上的区别: 因为MyISAM缓存有表meta-data(行数等),因此在做COUNT(*)时对于一个结构很好的查询是不需 ...

  6. Python_内置函数之max

    源码: def max(*args, key=None): # known special case of max """ max(iterable, *[, defau ...

  7. python之路--线程的其他方法

    一 . current_thread的用法 import threading import time from threading import Thread, current_thread def ...

  8. ASP.NET Web.config文件的配置(Configuration API)

    本次我们讨论主要聚焦在以下Web.config配置文件的设置值的读取. 1.<connectionString />连接字符串的读取. 2.<appSettings />应用程 ...

  9. React Native & Android & iOS

    React Native & Android & iOS React Native & Android & iOS https://facebook.github.io ...

  10. 常见IT工具软件总结

    1. 阿里云在线迁移服务 2.智能媒体管理 格式转换 业务域名管理 1. 每个业务有一个英文单词, 1. 每个 git 的命名应该是 chgg-业务英文-种类 2. 例如 chgg-plant-api ...