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() 这是获取水平滚动条的距离

目录
相关文章
|
2月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
64 0
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的智能小程序商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的智能小程序商城附带文章源码部署视频讲解等
28 3
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的智能化智能化电子相册附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的智能化智能化电子相册附带文章源码部署视频讲解等
28 1
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
55 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能停车计费系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能停车计费系统附带文章源码部署视频讲解等
27 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能菜谱推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能菜谱推荐系统附带文章源码部署视频讲解等
61 0
基于springboot+vue.js+uniapp小程序的智能菜谱推荐系统附带文章源码部署视频讲解等
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能水果销售系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能水果销售系统附带文章源码部署视频讲解等
17 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能小程序商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能小程序商城附带文章源码部署视频讲解等
28 2
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的高校智能培训管理系统分析与设计附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的高校智能培训管理系统分析与设计附带文章和源代码设计说明文档ppt
34 1
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js的地纬公司智能办公系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js的地纬公司智能办公系统附带文章和源代码设计说明文档ppt
25 1