JS如何实现导航栏的智能浮动

简介:     function smartFloat(obj) {        var obj = document.getElementById(obj);        var top = getTop(obj);        var isIE6 = /msie 6/i.
<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() 这是获取水平滚动条的距离

目录
相关文章
|
3月前
|
移动开发 JavaScript 前端开发
使用css 与 js 两种方式实现导航栏吸顶效果
使用css 与 js 两种方式实现导航栏吸顶效果
|
1月前
|
前端开发 容器
编程笔记 html5&css&js 057 CSS导航栏
编程笔记 html5&css&js 057 CSS导航栏
|
6月前
|
前端开发 JavaScript 搜索推荐
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
29 1
|
4月前
|
自然语言处理 算法 数据库
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
51 0
|
4月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
50 0
|
5月前
|
JSON 前端开发 JavaScript
ElementUI -- Mock.js介绍和使用与首页导航栏左侧菜单搭建
ElementUI -- Mock.js介绍和使用与首页导航栏左侧菜单搭建
33 0
|
6月前
|
JSON JavaScript 前端开发
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
58 0
|
7月前
|
JSON JavaScript 前端开发
【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建
【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建
49 0
|
9月前
|
JavaScript
js实现淘宝右侧导航栏功能
本章和大家分享的是模拟淘宝右侧导航栏的一个小功能。 左侧是商品内容,右侧是一个导航栏,当页面向下滚动的时候右侧导航栏也跟着移动
|
11月前
|
Web App开发 移动开发 前端开发
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.4 JavaScript 基础
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.4 JavaScript 基础