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,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
随机推荐
- Array Queries CodeForces - 797E
题目链接 非常好的一道题目, 分析,如果用暴力的话,时间复杂度是O(q*n)稳稳的超时 如果用二维DP的话,需要O (n*n)的空间复杂度,会爆空间. 那么分析一下,如果k>sqrt(n)的话, ...
- 一种简单有效的VBA源代码加密办法，支持64位宿主，适用于大部分VBA代码加密
原始出处:http://www.cnblogs.com/Charltsing/p/EncryptVBACode.html VBA代码加密是个老生常谈的问题,自从本人的VBA Dumper发布之后,在O ...
- c语言之字符串和格式化输入输出
字符串和格式化输入输出 #include<stdio.h> #include<string.h> #define DENSITY 62.4 int main(void) { f ...
- 提高工作效率-window热键
一.虚拟桌面 Ctrl win D 创建另一个桌面 Ctrl win 左右箭头 来回切换桌面 Ctrl win F4 关闭当前虚拟桌面 二.窗口 win M ...
- PyCharm中快速给选中的代码加上{}、<>、()、[]
快捷键Ctrl + Shift + S 呼出下图所示界面:
- Eclipse支持文件UTF-8编码
Eclipse修改编码格式_百度经验https://jingyan.baidu.com/article/2009576193ee38cb0721b416.html 这篇最棒 如何为eclipse中的文 ...
- nodejs配置nginx 以后链接mongodb数据库
服务器 :windows server2008 R2 反向代理 :nginx 1.15.1 for window 64位 数据库:mongodb 4 64位 使用框架express 首先下载nodej ...
- 初步了解HTTP
HTTP简介: HTTP:HyperText Transfer Protocol 超文本传输协议,是因特网上使用最为广泛的一种网络传输议,是用于从万维网(www :world wide web)服 ...
- Java 简单的登录验证码
1 验证码的作用 验证码是为了区分人与机器,如果没有验证码机制,web网站或者应用会遇到很多问题,具体如下: ① 网站容易被暴力登录攻破密码,可以制作一个自动程序不断的尝试登录,密码很容易被破解,系统 ...
- Arrays.copyOf() 和 System.arrayCopy()分析
java数组的拷贝四种方法:for.clone.System.arraycopy.Arrays.copyof public class Test1 { public static void main( ...