我们在浏览网页时，有时会遇到这样一种效果：在进入页面时导航栏上方会有一些内容显示，例如文字图片。

当页面向下滚动时，导航栏上方的内容渐渐被覆盖，原本也应该消失的导航栏却固定在了屏幕最上方，也不会随滚动而变化。可以让我们能快速的从页面任意位置打开导航栏进入其他页面，非常的方便。

并且在往上滚动回到页面顶部时，导航栏又会回到原来的位置，出现在文字图片下方。这种效果是如何实现的呢？

今天，就让长沙网站建设来教您制作这样的导航栏置顶效果吧！

一、效果原理及代码展示

按照惯例，首先写一个简单的页面出来。主要显示导航栏上方的内容，导航栏，以及其他元素。

(初始页面展示图)

再使用js代码进行效果的脚本编写，我们首先找到导航栏元素.box。计算它到页面顶部的距离值，保存为变量'navot'。接着对整个浏览器的窗口添加滚动事件监听，当页面被滚动并且滚动的距离超过'navot'的值时，立刻触发事件并执行js代码：

(js核心代码图展示)

当滚动距离大于'navot'的值时，js会立刻给导航栏添加上新的类名'fixedTop'，并通过新类名带来的Css样式:position: fixed，使导航栏脱离原有结构悬浮起来。无论页面滚动到哪个位置，导航栏永远会出现在页面最顶部。而当页面向上滚动回来时，在滚动的距离小于'navot'值时，移除 掉类名'fixedTop'，让导航栏回到页面结构中，在原有位置处重新显示，这样实现了长沙网站开发想要的效果。

(页面向下滚动时,效果展示图)

二、实际效果视频展示

三、常见问题解答

问：为什么在导航栏置顶时，页面内容会抖一下？

答：有可能是占位元素漏写了，长沙网站建设一般会再创建一个新的div，高度则设置'navot'变量的值、在导航栏脱离框架的同时将其插入进去，避免对下方的内容位置产生影响。

四、效果应用场合

本效果适用于所有长页面中，尤其是内容板块非常多的页面，对于网站的易用性和用户的体验都有很好的提升。

并且也不只限定为导航栏，页面中所有重要的内容和元素也都可以使用。通过这种方式让重要内容始终显示在浏览器窗口内，在提升关键元素曝光度的同时也能提升客户的体验，说不定就会让客户产生意向，从而与您达成合作。

以上就是长沙网站建设整理出的导航栏置顶效果的制作方法，希望能对您有所帮助！

长沙蒲公英网络作为长沙网站建设、长沙网站制作、长沙网站开发、长沙网站设计、长沙外贸网站建设、长沙外贸网站制作等领域的专业公司，将一如既往的提供高效且优质的网站优化服务，为您的企业的发展保驾护航。热线电话:0731-84069615.