<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. python学习笔记 map&&reduce

    ---恢复内容开始--- 1.map 1)map其实相当对吧运算符进行一个抽象,返回的是一个对象,但是这里不知道为什么不可以对一个map返回变量打印两次,难道是因为回收了? def f(x): ret ...

  2. 快速排序Golang版本

    Created by jinhan on --. Tip: http://blog.csdn.net/zhengqijun_/article/details/53038831 See: https:/ ...

  3. Less循环

    Less循环 在Less中,mixin可以调用它自身.通过这种递归调用,再结合Guard表达式和模式匹配,就可以写出各种循环结构.如,使用循环来创建一个网格类: .generate-columns(4 ...

  4. 设置SO_RECVBUF和SO_SENDBUF套接字选项

    控制套接字的行为(如修改缓冲区的大小). int getsockopt(int sockfd,int level,int optname,void *optval,socklen_t *optlen) ...

  5. web更改AD用户密码

    web更改AD用户密码 #web更改AD密码 #网站配置 绑定域名ad.test.cn 功能,更改AD用户密码 #参考http://bbs.51cto.com/thread-1379675-1.htm ...

  6. 批量抓取cisco设备配置脚本编写(expect/sed/awk/shell)

    应同事需求自行编写了第一个脚本,中间遇到一些坑. 需求,要求抓取设备"show ip interface brief"信息和"show interface des&quo ...

  7. Oracle基础知识整理

    Oracle以dba身份登陆 sqlplus / as sysdba;  表空间操作  创建用户以及授权操作 --创建表 create table teacher ( tNo number(4) no ...

  8. WPF水珠效果按钮组

    效果图 相关知识 这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看 贝塞尔曲线 先来看两组图,有助于理解什么是贝塞尔曲线(图片取自维基百科,参考链接1) 二次 ...

  9. 高版本号chrome安装flashplayer debuger后无法使用的问题

    起因应该是苹果公司指出flash player的安全问题,还有各种原因导致google将在未来取消NPAPI的支持,所以fp们就悲剧了在高版本号chrome(42以上)默认是关闭外部安装的插件使用的, ...

  10. x86 处理器开机顺序

    无论是千万行的linux ,还是百万行的uefi ,或者百十行的app, 它都有一个主线.应用程序是main() 函数里面全部函数运行完,程序结束.这里main() 做为程序的起点,uefi 能够觉得 ...