<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. 【Android开发学习笔记之一】5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  2. 输入一个A和B,,A<=B,A>=1,B<=pow(10,18)计算F=B!/A!结果的最后一位

    *************************************************************************代理运行函数,判断结果,进行输出*********** ...

  3. Java数据结构和算法(三)——冒泡、选择、插入排序算法

    上一篇博客我们实现的数组结构是无序的,也就是纯粹按照插入顺序进行排列,那么如何进行元素排序,本篇博客我们介绍几种简单的排序算法. 1.冒泡排序 这个名词的由来很好理解,一般河水中的冒泡,水底刚冒出来的 ...

  4. centos7.3搭建lamp实现使用wordpress

    ``` 环境说明: 在同一台主机上实现LAMP(Linux + Apache + MariaDB + PHP) CentOS 7.3.Apache 2.4.6.MariaDB 5.5.52.PHP 5 ...

  5. 《Linux命令行与shell脚本编程大全》第十九章 初识sed和gawk

    这两个工具能够极大简化需要进行的数据处理任务. 19.1 文本处理 能轻松实现自动格式化.插入.修改或删除文本元素的简单命令行编辑. sed和gawk就具备上述功能 19.1.1 sed编辑器 被称为 ...

  6. 51Nod 1108 距离之和最小 V2 1096 距离之和最小 中位数性质

    1108 距离之和最小 V2基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注三维空间上有N个点, 求一个点使它到这N个点的曼哈顿距离之和最小,输出这个最小 ...

  7. appium测试准备记录

    一 获取应用程序包名(手机中不安装apk) windows 环境下: aapt工具 使用aapt工具,适合给程序自动获取apk的相关信息. //aapt 是sdk自带的一个工具,在SDK/buildt ...

  8. Sagit.Framework For IOS 开发框架入门开发教程2:一行代码实现引导页

    前言: 开篇比较简单:Sagit.Framework For IOS 开发框架入门开发教程1:框架下载与环境配置 第二篇教程之前写了一半,感觉不太好写,而且内容单纯介绍API,要说的很多,又枯燥乏味. ...

  9. 运行期以索引获取tuple元素-C++11之1

    //运行期以索引获取tuple元素-C++11之1 //需支持C++11及以上标准的编译器,VS2017 15.5.x.CodeBlocks 16.01 gcc 7.2 //参见<深入应用C++ ...

  10. 互联网协议(Internet Protocol Suite)

    互联网实现分层:有的7层有的4层:阮一峰认为分五层(个人喜欢): 最底下的一层叫做"实体层"(Physical Layer),最上面的一层叫做"应用层"(App ...