<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. 一个RtspServer的设计与实现和RTSP2.0简介

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

  2. bootstrap_table_class表格样式实例

    <div class="container"> <h2>表格</h2> <!--table标签级别的样式说明如下: ----.table ...

  3. 微信小程序与Java后台通信

    一.写在前面 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的, ...

  4. VMware虚拟机安装教程

    在实际的开发过程中,使用到VMware的时候是很多的.当你的电脑安装的是windows系统而想使用linux系统时,为了避免对本机的系统进行操作,那么安装虚拟机就是一项不错的选择. 在写这篇博文时,刚 ...

  5. Android视频编辑SDK--RDVECore来自锐动的无UI,高度抽象化API

    1 RDVECore功能概述 RDVECore是锐动推出的无UI,高度抽象化API的视频编辑SDK,支持以下功能: 1.1 丰富的编辑功能 RDVECore包含了丰富的基础功能,对于编辑中的视频.图片 ...

  6. cap deploy:setup报错

    今天部署cap的时候,setup出现以下错误: 查询半天未果,不过最后还是在google找到了,可见度娘极为不靠谱! I had the same error on deploy:setup with ...

  7. 【NOIP2013提高组】火柴排队

    https://www.luogu.org/problem/show?pid=1966 Σ(ai-bi)2=Σai2+Σbi2-2Σai*bi,要使Σ(ai-bi)2最小,则需2Σai*bi最大. 由 ...

  8. 【Win 10 应用开发】MIDI 音乐合成——乐理篇

    针对 MIDI 音乐的 API ,其实在 Win 8.1 的时候就出现.在UWP中采用了新的驱动模式,MIDI 消息传递更加高效. 首先得说明的是,UWP 的 MIDI 相关 API 不是针对 MID ...

  9. day6、Linux下如何找出7天以前的文件删除

    有些时候,由于系统产生的日志文件,使服务器的磁盘空间紧张,所以怎么删除7天以前的日志文件及让系统只保留7天以内的日志文件 方法一 使用命令:find + |xargs + ls 命令方法:find / ...

  10. textarea高度自适应,随着内容增加高度增加

    $(function(){        $.fn.autoHeight = function(){            function autoHeight(elem){             ...