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. 423. Reconstruct Original Digits from English(Medium)

    Given a non-empty string containing an out-of-order English representation of digits 0-9, output the ...

  2. SPA单页面优缺点

    优点: 1.体验好,不刷新,减少 请求  数据ajax异步获取 页面流程: 2.前后端分离 3.减轻服务端压力 4.共用一套后端程序代码,设配多端 缺点: 1.首屏加载过慢: 2.SEO 不利于搜索引 ...

  3. 结对项目3-功能增强型带基本函数计算java计算器

    -----------------------------------------------------实验报告------------------------------------------- ...

  4. alibaba druid

    FAQ · alibaba/druid Wikihttps://github.com/alibaba/druid/wiki/FAQ sql 连接数不释放 ,Druid异常:wait millis 40 ...

  5. 通过event记录sql

    providers EventServiceProvider.php 添加 protected $listen = [ 'Illuminate\Database\Events\QueryExecute ...

  6. Day5-1 面向对象和面向过程

    摘要: 类的定义 类的增删改查 对象的增删改查 对象的查找和绑定 面向对象和面向过程的区别: 1.面向过程就像是工厂的流水线,按部就班的有序的工作. 优点:把复杂的问题简单化 缺点:可扩展性差.一个步 ...

  7. Linux 文件及目录管理命令基础

    pwd   显示当前所在目录 cd 切换目录 cd 命令语法 cd [选项] 目录 cd 的常用选项: cd ~ /cd 切换到当前用户的加目录 cd . 保持当前目录不变 cd .. 切换到上级目录 ...

  8. Linux基础学习笔记2-文件管理和重定向

    本节内容 1)文件系统结构元素 2)创建和查看文件 3)复制.转移和删除文件 4)软和硬链接 5)三种I/O设备 6)把I/O重定向至文件 7)使用管道 文件系统和结构 文件系统 文件和目录被组织成一 ...

  9. python爬虫之正则表达式

    一.简介 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念 ...

  10. 1、通过eureka创建注册中心

    第一个demo(用户需要调用电影服务) 1.创建项目 new starter project 勾选上Eureka Server 2.编写application.yml #配置端口 server: po ...