<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如何实现导航栏的智能浮动的更多相关文章

  1. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  2. [前端]如何写一个水平导航栏?(浮动、inline-block+消除间距)

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  3. 用sticky.js实现头部导航栏固定

    在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...

  4. 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. 用JS实现任意导航栏的调用

    首先设计一个关于导航的层叠样式表如:body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;backgro ...

  6. js 网站顶部导航栏

    (function(){ var map = { 'index' : 0, 'gift_code' : 1, 'base_info' : 1, 'band_phone': 1, 'unlink_pho ...

  7. 【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示

    <html> <head> <title>test</title> </head> <body> <div style=& ...

  8. JS写的二级导航栏(利用冒泡原理)

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  9. python 全栈开发,Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

    昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...

随机推荐

  1. 前端worker之web worker

    web worker 背景 众所周知javascript是单线程的,同一时间内只能做一件事情. 这是十分必要的,设想,如果js是多线程的.有个dom元素两个线程同时做了改变,一个display:non ...

  2. 《java.util.concurrent 包源码阅读》08 CopyOnWriteArrayList和CopyOnWriteArraySet

    CopyOnWriteArrayList和CopyOnWriteArraySet从数据结构类型上来说是类似的,都是用数组实现的保存一组数据的数据结构,区别也简单就是List和set的区别.因此这里就先 ...

  3. 一个RtspServer的设计与实现和RTSP2.0简介

    一个RtspServer的设计与实现和RTSP2.0简介   前段时间着手实现了一个RTSP Server,能够正常实现多路RTSP流的直播播放,因项目需要,只做了对H.264和AAC编码的支持,但是 ...

  4. 2943:小白鼠排队-poj

    2943:小白鼠排队 总时间限制:  1000ms 内存限制:  65536kB 描述 N只小白鼠(1 < N < 100),每只鼠头上戴着一顶有颜色的帽子.现在称出每只白鼠的重量,要求按 ...

  5. BST 解析 (二)height and deletion

    前面一章介绍了BST的结构和一些简单的基本功能,例如:insert,findMin,nextLarger等等.这一节主要讲解一些BST的delete node操作还有BST的height的分析以及一些 ...

  6. mysql 存储过程 小实例

    咱们先建个表吧 [SQL] 纯文本查看 复制代码 ? 1 2 3 4 5 6     CREATE TABLE `test1` (   `id` int(10) unsigned NOT NULL A ...

  7. session与cookie的区别与联系

    session与cookie是在做项目中很常用的会话技术,session与cookie也是面试中被问到频率最高的问题,有一次我去面试,面试官就怼着我session与cookie一直问(头都大了),下面 ...

  8. 【epubcfi函数generateRangeFromCfi和generateCfiFromRange】两者的区别和适用性,以及另一种实现

    epubcfi是描述epub规范电子书中文本位置的一种描述符,它是形如" epubcfi(/6/4[Section0017.xhtml]!4/42/178/1:0,4/42/198/1:1) ...

  9. 41.Linux应用调试-修改内核来打印用户态的oops

    1.在之前第36章里,我们学习了通过驱动的oops定位错误代码行 第36章的oops代码如下所示: Unable to handle kernel paging request at //无法处理内核 ...

  10. Docker: 限制容器可用的 CPU

    默认情况下容器可以使用的主机 CPU 资源是不受限制的.和内存资源的使用一样,如果不对容器可以使用的 CPU 资源进行限制,一旦发生容器内程序异常使用 CPU 的情况,很可能把整个主机的 CPU 资源 ...