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.给浮动元素后面加一个空的块 ...
随机推荐
- 一步步搭建最简单oauth2.0认证和授权
oauth2.0 最早接触这个概念是在做微信订阅号开发.当时还被深深的绕进去,关于oauth2.0的解释网上有好多,而且都讲解的比较详细,下面给大家价格参考资料. http://owin.org/ h ...
- 六、Hadoop学习笔记————调优之操作系统以及JVM
内核参数overcommit_memory 它是 内存分配策略 可选值:0.1.2.0, 表示内核将检查是否有足够的可用内存供应用进程使用:如果有足够的可用内存,内存申请允许:否则,内存申请失败,并 ...
- JavaScript学习笔记(十四)——对象
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- 【Java疑难杂症】利用Java核心库实现简单的AOP
Spring是一个十分火热开源框架,而AOP(面向切面编程)则是Spring最重要的概念之一,为了更好的理解和学习AOP的思想,使用核心库来实现一次不失为一个好方法. 首先介绍一下AOP的概念,AOP ...
- python解释执行原理(转载)
Python解释执行原理 转自:http://l62s.iteye.com/blog/1481421 这里的解释执行是相对于编译执行而言的.我们都知道,使用C/C++之类的编译性语言编写的程序,是需要 ...
- sql查询语句报错处理——ERROR: failed to find conversion function from unknown to text
今天遇到写存储过程遇到的一个小问题,在查询语句中使用到了自定义的数当做列的值,然后想给这一列起一个别名 ,就直接在后面用了 as 别名.执行存储过程,存储过程报错,ERROR: failed to f ...
- 使用JSCH框架通过跳转机访问其他节点
之前搞了套远程访问ssh进行操作的代码,最近有需求,需要通过一台跳转机才能访问目标服务.在网上搜了半天,也没找到比较好的例子,就自己翻阅了下JSCH的API.但是看的云里雾里的.联想了下,端口转发的原 ...
- Loadrunner手动编写包含事务、检查点、关联等元素的脚本实例
一.前言: 本文适合初学者,包含很多细节,包括 二.准备: 1.以虚拟机中的Linux系统作为服务器,开启bugfree服务. 2.以fiddler作为抓包工具,辅助脚本开发. 3.脚本流程:bugf ...
- ACM HDU 1081 To The Max
To The Max Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- Haproxy配置日志显示
安装完haproxy后,日志默认是记录在系统日志下的.为了便于排错以及查看日志,我们需要将haproxy日志剥离出来. 在配置前,我们先来了解下日志的level: local0-local7 16-2 ...