实现原理

  主要用到几个知识点:

原理:
1,浏览器向下滚动时,当document的scrollTop大于浮动层离窗口顶部的距离时,就让浮动层的position属性设为fixed定位,脱离文档流
2,浏览器向上滚动时,当document的scrollTop小于浮动层离窗口顶部的距离时,就让浮动层的position属性设为static定位,回归文档流

代码实现

先看看html和css代码,很简单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float_nav</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head> <body>
<div data-role="page">
<div data-role="header">
<h1>HEADER</h1>
</div> <div data-role="navbar" id="nav">
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a></li>
<li><a href="#">Section 4</a></li>
<li><a href="#">Section 5</a></li>
</ul>
</div> <div data-role="content">
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>

下面是js代码

1,先写一个获取元素距离顶部距离的函数       原理很简单,通过递归检查是否存在父元素,累加起来得到距离值

function getTop(e){
var offset = e.offsetTop;
if(e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
})();

2,我们接着写js代码

//先把浮动层对象存在一个变量中,方便后面调用
var obj = document.getElementById("nav");//b为漂浮层的id
//获取浮动层元素离窗口顶部的距离
var top = getTop(obj);

3,接下来最重要的,给窗口绑定滚动事件

window.onscroll = function(){
//获取窗口的scrollTop
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > top){
  /*当窗口的滚动高度大于浮动层距离窗口顶部的距离时,也就是原理中说的第一种情况
  *我们把这个浮动层position值设为fixed,top值设为0px,让它定位在窗口顶部*/
  obj.style.position = "fixed";
  obj.style.top = "0px";
  obj.style.width="100%";
} else {
  /*当窗口的滚动高度小于浮动层距离窗口顶部的距离时,也就是原理中说的第一种情况
  *我们把这个浮动层position值设为static或为空,让它回归文档流
  *让它回到原来的位置上去*/
  obj.style.position = "static";
}
}

有的人的使用的是IE6浏览器,IE6不支持fixed.fixed是定位在窗口顶部,是相对于窗口,如果我们让元素通过position:absolute相对于body定位,top设为body的scrollTop值,也就可以在IE6中模拟fixed了

4,兼容IE6..首先在前面加上判断浏览器是否是IE6的语句

//判断浏览器是否是IE6
var isIE6 = /msie 6/i.test(navigator.userAgent);

再来改动下窗口滚动事件绑定的函数的两句

//......
if (bodyScrollTop > top){
//如果是IE6,就设置position为absolute,否则设为fixed
obj.style.position = (isIE6) ? "absolute" : "fixed";
//如果是IE6,就设置top值为bodyScrollTop,否则top为0
obj.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";
} else {
//......

js完整代码如下:(将js代码放在body里面的最底下)

<script type="text/javascript">
(function(){
var obj = document.getElementById("nav");
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";
obj.style.width="100%";
} else {
obj.style.position = "static";
}
};
function getTop(e){
var offset = e.offsetTop;
if(e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
})();
</script>

JQuery Mobile+JS实现智能浮动定位导航条的更多相关文章

  1. Javascript:浮动的导航条

    代码主体及说明 Javascript部分: /** * @函数名:flexScroll * @功能:滚动超出一定高度,指定元素悬浮 * @两个参数:target_id:目标元素id;topEle:限定 ...

  2. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  3. jquery.smint.js 页面菜单浮动之谷歌浏览器异常

    jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在j ...

  4. js页面滚动时层智能浮动定位实现

    直接上代码 $.fn.smartFloat = function (className) { var position = function (element) { var top = element ...

  5. 使用 jQuery 实现当前页面高亮显示的通栏导航条

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  6. jquery实现可以中英切换的导航条

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  7. jquery控制滚动条改变上面固定(fixed)导航条或者搜索框的属性

    <script type="text/javascript"> $(document).ready(function(){ $(window).scroll( func ...

  8. easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

    jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile:那么jquery mobile到底包括些什么呢 简介工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条:Jqu ...

  9. 【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化

    关于 jQuery Mobile jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目.它应用了HTML5和CSS3. 主要特性 基于jQuery构建. 采用与jQuery一致 ...

随机推荐

  1. javascript中字符串常用操作总结

    String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不 ...

  2. 鼠标样式——css国际组织

    w3c国际标准组织提供的鼠标样式: http://css-cursor.techstream.org/

  3. mysql 中 max_allowed_packet 查询和修改

    mysql 会根据配置文件限制 server 接收的数据包的大小. 有时候大的插入和更新会被 max_allowed_packet 参数限制,报如下错误: Packet > ). You can ...

  4. java绘图drawString位置的确定

    根据api,很容易知道使用方式如下: 指定字符串和坐标即可. 但是简单认为字符串的起始位置就是左上顶点就错了,这样画起来每次的位置都不对,字体的大小不同,位置偏差很大.仔细看api注释后发现,y坐标是 ...

  5. HDU 2669 Romantic 扩展欧几里德---->解不定方程

    Romantic Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  6. Python之dict和set

    dict Python内置了字典:dict的支持,dict全称dictionary,使用键-值(key-value)存储,具有极快的查找速度 1.例如:查找某位同学对应的成绩,使用“名字”-“成绩”的 ...

  7. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 安装部署OpenPAI + VSCode 提交

    ========================================================== 安装openpai请参考这篇 https://www.cnblogs.com/ji ...

  9. BadgeView使用

    BadgeView是第三方的插件,用来显示组件上面的标记,起到提醒的作用,下载地址如下:http://files.cnblogs.com/files/hyyweb/android-viewbadger ...

  10. jsp到java后台中文乱码问题

    ---首先描述一下我的情况,我的jsp    设置了编码格式 <%@ page language="java" contentType="text/html; ch ...