<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. Pyhton编程(六)之基本数据类型-集合(补充)

    集合(set) 集合其实就是一个无序的,自动去重的数据集合,它主要的作用是用来去重和进行关系测试,集合的定义方法如下: name=set("czp") /name=set({1,2 ...

  2. javafx 聊天室WeChat

    [toc] 功能和特性 基于socket实现的c/s架构的的通信 服务器和客户心跳连接 gson实现的消息通信机制 注册及登录 支持私聊和群聊. 动态更新用户列表以及用户消息提示 支持emoji表情, ...

  3. npm install 时报错 Unexpected end of input at 1:15930

    从github上clone代码后npm install,结果解决办法: npm config set registry https://registry.npm.taobao.org之后出现自动生成了 ...

  4. Jfinal启动原理及源码简析

    以下所有源码只截取了部分代码,标题即为类名 1.Web.xml <filter-name>jfinal</filter-name> <filter-class>co ...

  5. 独家分析:安卓“Janus”漏洞的产生原理及利用过程

    近日,Google在12月发布的安卓系统安全公告中披露了一个名为"Janus"安卓漏洞(漏洞编号:CVE-2017-13156).该漏洞可以让攻击者绕过安卓系统的signature ...

  6. php综合运用技术

    五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transfer Protocol,文件传输协议,是应用层的 ...

  7. Undefined index: HTTP_RAW_POST_DATA的解决办法

    $postStr = $GLOBALS["HTTP_RAW_POST_DATA"]; 替换为 $postStr = isset($GLOBALS['HTTP_RAW_POST_DA ...

  8. 利用InfluxDB和Grafana搭建数据监测的仪表盘

    InfluxDB的介绍及安装 InfluxDB是支持持续写入的时序数据库,常用于监测系统所需要的数据的存储. 官网的详细安装步骤 https://docs.influxdata.com/influxd ...

  9. ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理

    分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...

  10. QGIS1.8.0的编译

    很早就关注QGIS了,关于它的编译,也尝试了好几次,但都没有成功.在要放弃的时候,再尝试了一回,完全按照他的intall指导.终于成功. 择其要点而言,就是要按部就班,不能偷工减料.想要成功编译,请按 ...