实现原理

　　主要用到几个知识点：

原理：
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. visual studio 不能进入调试状态

    解决Windows操作系统在处理回环地址 1. 第一种解决方案是禁用环回检查. 步骤如下 a) 依次单击“开始”和“运行”,键入 regedit,然后单击“确定” b) 在注册表编辑器中,找到并单击下 ...

  2. javascript加上标签

    在javascript脚本中可以加上标签,方便javascript程序进行快速定位,标签一般由一个合法的字符名称加上一个冒号组成,标签可以放在任意行的位置,这样可以为该行设置一个标记,然后再 结构体中 ...

  3. jquery select change下拉框选项变化判断选中值

    <th class="formTitle"> 是否转出: </th> <td class="formValue" colspan= ...

  4. SPA应用部署时首屏启动慢问题解决方案

    SPA应用部署时首屏启动慢问题解决方案 使用vuejs开发的单页应用,打包部署上线后,发现首屏启动时间达到了惊人的10s左右,于是开始优化,目前使用到的总结如下: 巧用webpack插件 1.抽取cs ...

  5. MySQL5：触发器

    什么是触发器 MySQL的触发器(trigger)和存储过程一样,都是嵌入到MySQL中的 一段程序.触发器是由事件来触发某个操作,这些事件包括INSERT.UPDATE和DELETE语句.如果定义了 ...

  6. gRPC版本的 Google APIs

    gRPC将是未来google所有客户端的库标准(DevoxxFR), 这句话的出处: https://twitter.com/chanezon/status/585724143003402240    ...

  7. python中垃圾回收机制

    Python垃圾回收机制详解   一.垃圾回收机制 Python中的垃圾回收是以引用计数为主,分代收集为辅.引用计数的缺陷是循环引用的问题.在Python中,如果一个对象的引用数为0,Python虚拟 ...

  8. Node.js从入门到实战ECMAScript6一页纸总结（很大的一页纸）

    一.ES5/ES6和babel ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化,现在的浏览器已经相当于完全实现了这个标准.ECMAScript6,即ES6 ...

  9. Fastify 系列教程一 （路由和日志）

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...

  10. 【代码笔记】iOS-iphone开发之获取系统字体

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. NS ...