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

目录
相关文章
|
20天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
34 4
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
53 1
|
3月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
83 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的智能小程序商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的智能小程序商城附带文章源码部署视频讲解等
32 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的智能化智能化电子相册附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的智能化智能化电子相册附带文章源码部署视频讲解等
36 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能停车计费系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能停车计费系统附带文章源码部署视频讲解等
38 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能菜谱推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能菜谱推荐系统附带文章源码部署视频讲解等
70 0
基于springboot+vue.js+uniapp小程序的智能菜谱推荐系统附带文章源码部署视频讲解等
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
74 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能小程序商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能小程序商城附带文章源码部署视频讲解等
34 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的智能水果销售系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的智能水果销售系统附带文章源码部署视频讲解等
23 0
下一篇
无影云桌面