JS如何实现导航栏的智能浮动
<script language="javascript">
function smartFloat(obj) {
var obj = document.getElementById(obj);
var top = getTop(obj);
var isIE6 = /msie 6/i.test(navigator.userAgent);
window.onscroll = function () {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > top) {
obj.style.position = (isIE6) ? "absolute" : "fixed";
obj.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";
} else {
obj.style.position = "static";
}
}
function getTop(e) {
var offset = e.offsetTop;
if (e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
}
window.onload = function () {
smartFloat("nav");
}
</script>
****扩展*****
//原生JS
//获取div距离顶部的距离
var mTop = document.getElementsByClassName('mdiv')[0].offsetTop;
//获取滚动条的高度
var sTop = document.body.scrollTop;
//Jquery
mTop = $('.mdiv')[0].offsetTop;
sTop = $(window).scrollTop();
$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离
JS如何实现导航栏的智能浮动的更多相关文章
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- [前端]如何写一个水平导航栏?(浮动、inline-block+消除间距)
在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...
- 用sticky.js实现头部导航栏固定
在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 用JS实现任意导航栏的调用
首先设计一个关于导航的层叠样式表如:body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;backgro ...
- js 网站顶部导航栏
(function(){ var map = { 'index' : 0, 'gift_code' : 1, 'base_info' : 1, 'band_phone': 1, 'unlink_pho ...
- 【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示
<html> <head> <title>test</title> </head> <body> <div style=& ...
- JS写的二级导航栏(利用冒泡原理)
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...
- python 全栈开发,Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)
昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...
随机推荐
- 十五、Hadoop学习笔记————Zookeeper的环境搭建
linux中/opt一般用来存放应用/var目录一般用来存放日志 sample为样例文件,复制一份zoo.cfg文件 配置zoo文件,id为服务器id(整数),host为服务器的ip地址,第一个por ...
- mysql初体验
1.mysql数据库: 数据库----文件夹 数据表----文件 数据数据行---文件中的一行数据2. 初始: show databases; 查看当前mysql都有那些数据库,也就是根目录有哪些文件 ...
- 在本地搭建play-with-docker
安装play-with-docker 官方Github地址 https://github.com/play-with-docker/play-with-docker 本人Github地址 https: ...
- 边框(Border) 和 轮廓(Outline) 属性
border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...
- 防止SSH自动断线
在连接远程SSH服务的时候,经常会发生长时间后的断线,或者无响应(无法再键盘输入). 总体来说有两个方法: 1.依赖ssh客户端定时发送心跳. putty.SecureCRT.XShell都有这个功能 ...
- 16进制到byte转换
我们经常会看到这样的语法 (byte) 0xAD 0xAD实际是个16进制,转换成二进制为:10101101,转换成10进制是:173,它是个正数 10101101只是int的简写,int由4个byt ...
- Tomcat启动慢解决方法(本人CentOS7.4系统)
首先查看日志信息,查看因为什么而启动慢 在CentOS7启动Tomcat时,启动过程很慢,需要几分钟,经过查看日志,发现耗时在这里:是session引起的随机数问题导致的.Tocmat的Session ...
- 《Qt on Android核心编程》介绍
<Qt on Android核心编程>最终尘埃落定.付梓印刷了. 2014-11-02更新:china-pub的预售链接出来了.折扣非常低哦. 封面 看看封面的效果吧,历经几版,最终就成了 ...
- hdu3015 Disharmony Trees
Problem Description One day Sophia finds a very big square. There are n trees in the square. They ar ...
- 一道题Wrong Answer之后该何去何从?
写程序手不稳是个大毛病,往往会让一份能AC的代码变成99.995%正确,失之毫厘谬以千里,近期十场个人赛非常少有能一次AC的经历,细致想想除了根本逻辑上的错误.大概都是跪在这些细节上: 1.输出格式, ...