实现原理

　　主要用到几个知识点：

原理：
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. AngularJS内建服务以及自定义服务的用法

    在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...

  2. C# UML类图及类之间的几种关系

    今天晚上看了大话设计模式中的UML类图这一节感觉受益匪浅,好多年不能理解的类之间的关系理解了. 一.UML类图的表示方法 1.类的表示方法 A类用一个矩形框分三层表示,第一层是类名,斜体类名表示抽象类 ...

  3. [javascript] Promise简单学习使用

    原文地址:http://www.cnblogs.com/dojo-lzz/p/4340897.html 解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Pr ...

  4. SpringBoot(四) Core Features: Logging

    参考 文档: 26. Logging

  5. 地址解析协议ARP，网络层协议IP、ICMP协议

    分析所用软件下载:Wireshark-win32-1.10.2.exe 阅读导览 1. 分析并且应用ARP协议 2．分析IP协议 3．分析ICMP协议 1.分析arp报文的格式与内容 (1)ping ...

  6. 如何灵活利用免费开源图标字体-IcoMoon篇——张鑫旭

    一.温故知新 之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用. 不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体. 显然,系 ...

  7. css 相对单位rem详解

      CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...

  8. Python3 笔记01：求两数之和

    这是来自于leetcode的题目: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的 两个 整数. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数 ...

  9. Csv读写类

    <?php /** * CSV 文件读写类 * * 示例: $header = array('name' => '名字', 'age' =>'年龄', 'idcard' => ...

  10. vue生命周期理解

    https://segmentfault.com/a/1190000008010666?utm_source=tag-newest