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. Jenkins - SSH认证方式拉取Git代码

    1.本地生成密钥 [root@root ~] ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which ...

  2. 微信小程序学习笔记以及VUE比较

    之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...

  3. 多路选择器实现总线结构——Verilog

    ////////////////////////////////////////////////////////////////////////////////// //该程序完成通过多路选择器MUX ...

  4. NFV组播实验对照

    一 论文题目:Approximation and Online Algorithms for NFV-Enabled Multicasting in SDNs 发表时间:2017 期刊来源:Inter ...

  5. WinRAR从入门到高级的操作技巧集合

    一.基础技巧 1.批量建立文件夹 如果在工作中,经常要建立很多相同文件夹结构(如在备份数据时).那可以把这个繁琐的工作让WinRAR完成:先在“资源管理器”中把多个文件夹结构建好(包括其下的子文件夹) ...

  6. python的UnboundLocalError： local variable 'xxx' referenced b

    一.意思: 本地变量xxx引用前没定义. 二.错误原因     在于python没有变量的声明 , 所以它通过一个简单的规则找出变量的范围 :如果有一个函数内部的变量赋值 ,该变量被认为是本地的,所以 ...

  7. AQS解析（未完成）

    参考:Java并发之AQS详解 同步队列和condition等待队列.获取到锁的线程则处于可运行状态,而未获取到锁的线程则被添加到同步队列中,等待获取到锁的线程释放锁. 一.数据结构 Node sta ...

  8. 手机移动端input date placehoder不显示

    要解决这个问题,我们可以伪造一个placehoder,通过css跟js来解决这个问题. 为什么要用js的原因是因为当你选择了时间之后,placehoder的文字没有清除掉,所以我们就需要把这个伪造的p ...

  9. Laravel Providers——服务提供者的注册与启动源码解析

      本文 GitBook 地址: https://www.gitbook.com/book/leoyang90/laravel-source-analysishttps://learnku.com/a ...

  10. Java中的break，continue关于标签的用法（转载）

    Java的控制循环结构中是没有关键字goto的,这种做法有它的好处,它提高了程序流程控制的可读性,但是也有不好的地方,它降低了程序流程控制的灵活性,所以说,“上帝是公平的”.所以,Java为了弥补这方 ...