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. 学习用Node.js和Elasticsearch构建搜索引擎（1）：了解并运行Elasticsearch

    1.学习Elasticsearch概述. 了解Elasticsearch是什么?能做什么?可以查一下elasticsearch.lucene等的相关介绍,另外也可以查查资料比较一下其它的搜索引擎sph ...

  2. 翻转一个数组（c++实现）

    反转一个数组: 其实STL中的vector有一个reverse函数便可以使用. #include<iostream> using namespace std; int* ReverseAr ...

  3. H5 video标签的属性

    35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...

  4. c++之sizeof的用法

    在此温习一下c语言中sizeof的用法以及c++11.0的标准中,关于初始化的新方式,先上代码: # include "iostream" # include "stri ...

  5. session与cookie的区别以及HTML5中WebStorage理解

    一.session与cookie的区别 二.HTML5中WebStorage理解 WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回 ...

  6. Innodb日志与事务

    1.Innodb日志: 错误日志:记录出错信息,也记录一些警告信息或者正确的信息. 查询日志:记录所有对数据库请求的信息,不论这些请求是否得到了正确的执行. 慢查询日志:设置一个阈值,将运行时间超过该 ...

  7. 解决object at 0x01DB75F0

    python在学习过程中吗,由于常常会出现代码运行没报错,但输出的却不是我们想要的结果(图表,列表等等),而出现类似 <filter object at 0x01DB75F0>的情况,比如 ...

  8. MySql实现分页查询的SQL，mysql实现分页查询的sql语句

    一:分页需求: 客户端通过传递start(页码),limit(每页显示的条数)两个参数去分页查询数据库表中的数据,那我们知道MySql数据库提供了分页的函数limit m,n,但是该函数的用法和我们的 ...

  9. 我们为什么要使用List和Set（List,Set详解）

    1.集合概述 类图 集合和数组的区别? 集合基本方法 集合特有的遍历方式? public static void main(String[] args) { //创建集合对象 Collection c ...

  10. linux 安装ssh以及ssh用法与免密登录

    想要免费登录就是把本地机器的id_rsa_pub的内容放到远程服务器的authorized_keys里面 一.配置yum和hosts文件 配置hosts文件: 命令:vi /etc/hosts 在文件 ...