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.给浮动元素后面加一个空的块 ...
随机推荐
- 利用docker搭建spark hadoop workbench
目的 用docker实现所有服务 在spark-notebook中编写Scala代码,实时提交到spark集群中运行 在HDFS中存储数据文件,spark-notebook中直接读取 组件 Spark ...
- Android App插件式换肤实现方案
背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...
- TP框架Ajax如何使用
ThinkPHP可以很好的支持AJAX请求,系统的\Think\Controller类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端.并且支持JSON.JSONP.XML和EVAL四 ...
- 边框(Border) 和 轮廓(Outline) 属性
border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...
- Akka(40): Http:Marshalling reviewed - 传输数据序列化重温
上篇我们讨论了Akka-http的文件交换.由于文件内容编码和传输线上数据表达型式皆为bytes,所以可以直接把文件内容存进HttpEntity中进行传递.那么对于在内存里自定义的高级数据类型则应该需 ...
- 一个部署了tomcat服务的linux服务器,运行一段时间后出现内存和空间不足的问题
—— 前段时间项目上的事比较忙,期间笔记都是临时存在本地txt,这些天有点时间了,整理出来,以便日后查看: linux 查看内存使用情况:free -m 释放缓存: /proc/sys/vm/drop ...
- python爬虫入门--beautifulsoup
1,beautifulsoup的中文文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 2, from bs4 import Be ...
- PHP生成 uuid
// 生成UUID,并去掉分割符 function guid() { if (function_exists('com_create_guid')){ $uuid = com_create_guid( ...
- Web前端学习——HTML
HTML其实还是蛮容易学习的,无非就是一些标签.格式的填写,大学的时候也做过网站设计,所以这里主要记录一些常用的HTML标签.属性以及书写方法等. 一.常见HTML格式 主要包含文件type,html ...
- NNSZ OIers' Blog Archive
HWL:ssttkkl ,已经搬家到这个地址 NINGLONG:NINGLONG 愤鸟先飞: FNXF Syhien:13355936 ,已经搬家到这个地址 IDE:ThetaS TFW:TFX‘s ...