文章目录
1，动态演示效果图2，设置相对定位的静态网页排版html代码 >>>css代码 >>>3，获取页面标签后进行事件监听js代码 >>>最终效果截图 >>>1，动态演示效果图
2，设置相对定位的静态网页排版
html代码 >>>
<div class="container"><div class="topDiv"><ul><li>导航一</li><li>导航二</li><li>导航三</li></ul></div><div class="disDiv">核心技术编辑HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。HTML指的是超文本标记语言 (Hyper Text MarkupLanguage)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML指可扩展超文本标签语言（EXtensibleHyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML4.01几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。CSS级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（StyleSheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。</div></div>
css代码 >>>
body {margin: 0;padding: 0;/* 渐变式背景，方便观察是否滑动 */background: linear-gradient(45deg, gray, #ddd, rgb(180, 53, 53));}/* 主体标签，填充高度，保证Y轴滚动条出现，让鼠标能滑动 */.container {position: relative;margin-top: 190px;width: 100%;height: 2000px;}/* 浮动导航栏 */.topDiv {display: block;position: relative;top: 0;left: 0;width: 1040px;height: 50px;margin: 0 auto;margin-top: 190px;background:linear-gradient(to right, rgb(51, 187, 250) , gray);box-shadow: 1px 1px 12px #ddd;z-index: 9999999;}.topDiv ul{font-size: 0;margin-left: -40px;}/* 先让li水平显示 */.topDiv ul li {display: inline-block;height: 50px;line-height: 50px;color: #fff;font-size: 14px;border-right: 2px solid #fff;background-color: #000;padding: 0 20px;cursor: pointer;}.topDiv ul li:hover {color: #000;background-color: rgb(255, 255, 255);border-right: 2px solid rgb(61, 235, 113);}.disDiv {display: block;width: 1020px;height: 600px;padding: 10px;line-height: 30px;color: rgb(34, 159, 231);background-color: rgb(255, 255, 255);margin: 4px auto 0;}
3，获取页面标签后进行事件监听
当滚动鼠标后，当前页面高度距离根页面顶部高度的大于190px 后执行js代码，让导航栏进行浮动, 设置position属性为fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
js代码 >>>
const topDiv = document.getElementsByClassName('topDiv')[0];window.onscroll = function () {// scrollTop表示滚动后距离顶端多少// 当距离页面顶端大于164px的距离时会让导航栏浮动且宽度100%适配浏览器，否则导航栏采用相对定位，宽度变成1040pxif (document.documentElement.scrollTop >= 190) {topDiv.style.position = "fixed";topDiv.style.marginTop = "0px";topDiv.style.width = "100%";} else {topDiv.style.position = "relative";topDiv.style.marginTop = "190px";topDiv.style.width = "1040px";}}
最终效果截图 >>>
移动前
移动后
