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. Beta阶段团队成员贡献分分配规则

    Beta阶段团队成员贡献分分配规则 Alpha阶段贡献分分配有些负责,在这里进行一些修改: 对任务完成得分部分进行了简化 对发现bug的惩罚措施进行了修改 移除了优化得分,不鼓励修改他人代码 移除了帮 ...

  2. Eclipse中Git的使用以及IDEA中Git的使用

    一.Eclipse中Git解决冲突步骤: 1.进行文件对比,将所有的文件添加到序列. 2.commit文件到本地仓库. 3.pull将远程仓库的代码更新到本地,若有冲突则会所有的文件显示冲突状态(真正 ...

  3. 【学习总结】C-翁恺老师-入门-总

    2019-1-2 翁恺老师C入门视频-启程 代码详见GitHub: 目录 第0周:程序设计与C语言 第1周:计算 第2周:判断 第3周:循环 第4周:循环控制 第5周:数据类型 第6周:函数 第7周: ...

  4. 【Python3练习题 010】将一个正整数分解质因数。例如：输入90,打印出90=2*3*3*5。

    #参考http://www.cnblogs.com/iderek/p/5959318.html n = num = int(input('请输入一个数字:'))  #用num保留初始值 f = []  ...

  5. connect、resource和dba三种标准角色

    授权语句:grant connect,resource,dba to zwserver 经过授权以后,用户拥有connect.resource和dba三个角色的权限: (1)Connect 角色,是授 ...

  6. 用Canvas实现一些简单的图片滤镜

    1.灰度滤镜 对于灰度滤镜的实现一般有三种算法 1) 最大值法:即新的颜色值R=G=B=Max(R,G,B),通过这种方法处理后的图片看起来亮度值偏高. 2) 平均值法:即新的颜色值R=G=B=(R+ ...

  7. 用户认证--------------auth模块

    一.auth模块 from django.contrib import auth 1 .authenticate()   :验证用户输入的用户名和密码是否相同 提供了用户认证,即验证用户名以及密码是否 ...

  8. 使用阿里云OSS,上传图片时报错：java.lang.ClassNotFoundException:org.apache.http.ssl.TrustStrategy

    问题产生的原因就是jar包版本问题,阿里的SDk引入的pom中依赖的httpclient和httpcore版本高于当前项目中已经设置的版本. 解决: 删除低版本后,更新下项目.

  9. Java线程的5种状态及切换(透彻讲解)-京东面试

    一.Thread的几个重要方法: 我们先了解一下Thread的几个重要方法. a.start()方法,开始执行该线程:b.stop()方法,强制结束该线程执行:c.join方法,等待该线程结束.d.s ...

  10. 莫烦keras学习自修第三天【回归问题】

    1. 代码实战 #!/usr/bin/env python #!_*_ coding:UTF-8 _*_ import numpy as np # 这句话不知道是什么意思 np.random.seed ...