标签：div bsp 多网站 UNC 移动 eth cti off osi
固定导航栏
前言：很多网站都有这种网页的效果：滑动浏览器右侧的滚动条，导航栏会一直处于最上方
下面我就来简单实现以下这个功能
一.首先我们来写一下html的结构：
1 <div class="top" id="top"></div> 2 <div class="nav" id="nav"></div> 3 <div class="main" id="main"></div>
二.我们来简单写一下样式
这个结构可以说是简单明了，由三部分组成 顶部 导航栏 还有主体部分
但是我们并不打算继续写下去 我们简单的用样式表达一下 用颜色划分区域 这个是练习的好方法
1 <style> 2 .top { 3 height: 200px; 4 width: 100%; 5 background-color: #f00; 6 } 7 .nav { 8 height: 150px; 9 background-color: skyblue; 10 width: 100%; 11 } 12 .main { 13 margin-top: 100px; 14 height: 1000px; 15 width: 100%; 16 background-color: black; 17 } 18 </style>
三.接着我们来写一下js的代码
1 window.onscroll = function () { 2 if (getScroll().top >= my$("top").offsetHeight){
//利用定位使其固定 脱标 3 my$("nav").style.position = "fixed"; 4 my$("nav").style.top = 0;
//设置main 的 margintop 防止由于nav的脱标 main 整体向上移动 而造成下拉过程并不流畅的效果 5 my$("main").style.marginTop = (my$("nav").offsetHeight + 100) + "px"; 6 } 7 else {
//取消设置的东西 然后恢复成原来的样子 8 my$("nav").style.position = ""; 9 my$("main").style.marginTop = "100px"; 10 } 11 }
标签：div bsp 多网站 UNC 移动 eth cti off osi
原文地址：https://www.cnblogs.com/Lzxgg-xl/p/10257693.html
