JS 实现DIV 滚动至顶部后固定
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 滚动至顶部后固定的更多相关文章
- [js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
- js实例--js滚动条缓慢滚动到顶部
收集篇(已测)-- <html><head> <script type="text/javascript"> var currentPositi ...
- div滚动到页面顶端后固定住
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- 滚动页面时DIV到达顶部时固定在顶部
本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...
- JS DIV列表自动滚动带停顿，滚动到底部后自动滚动到顶部
setInterval -- 间隔执行函数:element.scrollTop -- 元素滚动条距头部的距离: 因为执行代码需要时间,所以最终动态时间会比设置的要慢 var slide = new S ...
- 一款基于jquery滑动后固定于顶部的导航
之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预 ...
- scrollTop如何实现click后页面过渡滚动到顶部
用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
随机推荐
- 杭电 1061 Rightmost Digit计算N^N次方的最后一位
Problem Description Given a positive integer N, you should output the most right digit of N^N. Input ...
- Unique Snowflakes UVA - 11572 （离散化+尺取法）
Emily the entrepreneur has a cool business idea: packaging and selling snowflakes. She has devised a ...
- Day15 Python基础之logging模块（十三）
参考源:http://www.cnblogs.com/yuanchenqi/articles/5732581.html logging模块 (****重点***) 一 (简单应用) import lo ...
- 使用node写一个简单的页面操作
let http = require('http'); let urlStr = require('url'); let fs = require('fs'); let path = require( ...
- Django--CRM-客户列表展示, 分页
一 . 客户列表展示 为了插入数据方便,我们可以用django里面的admin插入数据 创建超级用户 把语言改成中文 结果: 列表展示 展示不同字段的方式: # 有需要的可以写 def__str__( ...
- python之路--MySQl单表查询
一. 关键字的执行优先级(重点) from where group by having # 使用是要放在group by 后面而且前面必须有group by select distinct # 去重 ...
- WPF程序中App.Config文件的读与写
WPF程序中的App.Config文件是我们应用程序中经常使用的一种配置文件,System.Configuration.dll文件中提供了大量的读写的配置,所以它是一种高效的程序配置方式,那么今天我就 ...
- java 中 System
package cn.zhou.com; /* * System 类 * * 不能实列化 * * long t=System.currentTimeMillis();//用于计算程序的执行时间! * ...
- Ajax之Jquery封装使用举例2（Json和JsonArray处理）
本例主要使用ajax进行异步数据请求,并针对返回数据为json和jsonarray类型的数据处理. 本例中只有前端的代码,后端代码不是本文重点,故省略. 后端接口返回数据为: Json: {" ...
- 三、K8S成功
kubeadm join 172.17.149.114:6443 --token yjogpa.kk85u2i4n5rt1omq --discovery-token-ca-cert-hash sha2 ...