javascript原生—悬浮导航栏

今天项目里有个悬浮导航条的效果，自己用原生写了个demo，分享出来供大家参考，希望多多交流。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><title>悬浮导航</title><style type="text/css">*{margin: 0px; padding: 0px;}#box{height: 2000px;  }#header{height: 150px; line-height: 150px; background: pink; text-align: center;}#nav{height: 50px; background: green; text-align: center; line-height: 50px; font-size: 28px; width: 100%; z-index: 10;}#content{height: 600px; background: #f60;}.navBox{width: 100%; height: 50px;   }</style><script type="text/javascript">window.οnlοad=function(){function getPos(obj){var left=0;var top=0;while(obj.offsetParent){left+=obj.offsetLeft;top+=obj.offsetTop;obj=obj.offsetParent;}return {"left":left,"top":top};}var oNav=document.getElementById('nav');var navT=getPos(oNav).top;window.οnscrοll=window.οnresize=function(){var scT=document.documentElement.scrollTop||document.body.scrollTop;if(navT<=scT){oNav.style.position='fixed';oNav.style.top='0';oNav.style.left='0';}else{oNav.style.position='';}}}</script>
</head>
<body><div id="box"><div id="header">顶部内容</div><div class="navBox"><div id="nav">悬浮导航</div></div><div id="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></div>
</body>
</html>

javascript原生—悬浮导航栏相关推荐

闪亮的玻璃图标悬浮导航栏效果
闪亮的玻璃图标悬浮导航栏效果 https://www.bilibili.com/video/BV1H44y157nr FROM :B站UP:艾恩小灰灰 <!DOCTYPE html> &l ...
鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
html+css+jq 悬浮导航栏
右侧导航栏,一直悬浮在右侧居中处,当导航栏到页面的最上面部分,导航栏消失,当鼠标滑动到页面的第二部分,导航栏出来,导航栏出现的位置在页面的第二部分和第三部分,即是页面的中部和下部.可设置描点跳转到页面 ...
HTML(Basic) Chapter4(Pink) 综合案例悬浮导航栏
文章目录 HTML图像标签示例 HTML源代码(demo.html) 最终效果写在最后 HTML图像标签示例功能:利用之前所学的所有背景图片以及标签选择器的知识,做一个网站导航栏 HTML源代码( ...
iOS基础：修改app状态栏颜色以及原生的导航栏颜色
<1>设置状态栏文字颜色以及背景颜色这个设置引用自链接:https://www.jianshu.com/p/889cff2b3a52 苹果目前状态栏目前有两种状态颜色 iOS7以后状态 ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
悬浮左侧导航栏html,js + css实现左侧悬浮导航栏
浮在页面上的导航菜单 body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: ...
html 窗口左边悬浮ul,js + css实现左侧悬浮导航栏
浮在页面上的导航菜单 body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: ...
Flutter 项目实战滚动悬浮导航栏十五

javascript原生—悬浮导航栏

javascript原生—悬浮导航栏相关推荐

最新文章

热门文章