代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Js
】
页面滚动条向下拉到一定的程度时,某个div就固定在顶
作者:
/ 发布于
2017/11/13
/
557
页面滚动条向下拉到一定的程度时,某个div就固定在顶部,向上拉时返回原位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style> *{ padding:0; margin:0; } #header{ position: fixed; top: 0; left: 0; height: 30px; width: 100%; background: #555; opacity: 0.8; } #nav,.nav{ height: 30px; width: 100%; background: #000; opacity: 0.8; } .fixed{ position: fixed; top:30px; left:0; } </style> </head> <body> <div id="header"></div> <div style="margin-top:30px;"> <script type="text/javascript"> //document.write('<div id="nav"></div>'); for(var i=0;i<100;i++) document.write('<div>'+i+' hello world'+'</div>'); </script> </div> <div id="nav"></div> <script type="text/javascript"> for(var i=100;i<200;i++) document.write('<div>'+i+' hello world'+'</div>'); </script> <script type="text/javascript"> function getElementViewTop(element){ var actualTop = element.offsetTop; var current = element.offsetParent; while (current !== null){ actualTop += current.offsetTop; current = current.offsetParent; } var elementScrollTop=0; if (document.compatMode == "BackCompat"){ elementScrollTop=document.body.scrollTop; } else { elementScrollTop=document.documentElement.scrollTop; } return actualTop; // return actualTop-elementScrollTop; } function getScroll() { var top, left, width, height; if (document.documentElement && document.documentElement.scrollTop) { top = document.documentElement.scrollTop; left = document.documentElement.scrollLeft; width = document.documentElement.scrollWidth; height = document.documentElement.scrollHeight; } else if (document.body) { top = document.body.scrollTop; left = document.body.scrollLeft; width = document.body.scrollWidth; height = document.body.scrollHeight; } return { 'top': top, 'left': left, 'width': width, 'height': height }; } var nav = document.getElementById('nav'); var posTop = getElementViewTop(nav); window.addEventListener('scroll',function(event){ var scrollTop = getScroll().top; var output = document.getElementById('output'); output.innerHTML = posTop +' '+scrollTop+' '+(posTop-scrollTop); if(posTop>=30 && posTop-scrollTop <= 30) nav.className = 'nav fixed'; else nav.className = 'nav'; },false); </script> <div id="output" style="position:fixed;width:60px;height:60px;right:100px;bottom:100px;background:#DDD">0</div> </body> </html>
试试其它关键字
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
贡献的其它代码
Label
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3