滚动页面，实现导航栏固定在顶部（吸顶效果）

最新推荐文章于 2024-08-13 16:27:02 发布
最新推荐文章于 2024-08-13 16:27:02 发布
阅读量2k 收藏 8
点赞数
文章标签： css javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43772742/article/details/116761449
版权
本文介绍如何使用CSS的sticky属性和JavaScript监听scroll事件，实现当页面滚动时，导航栏自动固定在顶部的吸顶效果。通过设置CSS样式及在滚动到特定位置时切换定位状态，可以轻松达成这一目标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

利用position的sticky属性

  position: sticky;
  position: -webkit-sticky;    // 兼容 -webkit 内核的浏览器
  top: 10px;                          // 必须设一个值，否则不生效

万能方式处理

思路：前提时需要监听scroll事件
1）滚动条不动时，是静态相对定位状态relative
2）当页面滚动超出设置距离时，js改变样式属性 切换定位状态变成fixed，同时再给top设置一个值

css部分

// 滚动条不动时
.box{
   
position
最低0.47元/天 解锁文章
Eliyaya
关注
ELEMENT顶部导航栏固定
算法与编程之美
12-07 4187
1 问题描述在制作网页时，若想让顶部的导航栏在页面整体滑动时，导航栏一直在顶部显示。准备：引入element组件。2 算法描述使用addEventListener() 方法，进行事件监听，...
jQuery实现在鼠标滚动后导航栏保持固定（吸顶效果）
Angelo的自留地
07-29 1956
效果：鼠标向下滚动后，导航栏在屏幕上置顶固定。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * { padding: 0; margin: 0 } ul, li { ...
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
顶部导航栏固定系列
weixin_30724853的博客
08-14 166
通过position属性如下： 　　　　position:fixed; top:0; left:0; z-index: 50; 效果图： 转载于:https://www.cnblogs.com/ting0527/p/11353605.html...
当导航栏滚动到浏览器顶部时，固定导航栏
weixin_34280237的博客
04-12 534
获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。 代码如下 复制代码 •$(function(){ •//获取要定位元素距离浏览器顶部的距离 •var navH = $(".nav").offset().top; •//滚动条事件 •$(wind...
导航栏滚动到顶部时固定在顶部
yzp0112的博客
06-30 2203
HTML <div class="top"></div> <div id="fixed"></div>css *{margin: 0;padding: 0;} body{height: 1000px;} .top{ width: 100%; height: 200px; background: blue; }
html中使用js+css使导航条（页面的一部分）在随页面滚动到顶部的时候停留在窗口边缘
无笺札记
03-24 6097
&lt;!DOCTYPE html&gt; &lt;html lang=zh-cn&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;title&gt;一个不带CSS样式的HTML5布局&lt;/title&gt; &lt;meta name=description content=一个不带CSS样式的HTML5布局&gt; &lt;meta
Vue实现根据页面滚动距离实现导航栏吸顶效果
weixin_47686269的博客
10-09 773
Vue实现根据页面滚动距离实现导航栏吸顶效果 <template> <div id="app"> <div id="demo"></div> <div id="nav" :class="{ 'fix-nav': navBarFixed }"></div> <!-- 下拉验证是否吸顶 --> <p>1</p> <p>2</p>
页面滚动时导航栏固定在顶部-吸顶
joe_324的博客
01-25 1014
html部分 <div class="btnBox"> <span class="topTitle">阶段详情</span> <span> <el-button size="small" type="primary">一键折叠</el-button> <el-button size="small" type="primary">添加关注</el-button> <el-but
js实现导航吸顶效果
10-20
该效果指的是当用户向下滚动页面时，页面顶部的导航栏固定在浏览器窗口的顶部，而不是随着页面的其他内容一起滚动出去。本文将详细介绍如何使用JavaScript实现导航栏吸顶效果，并提供示例代码。 首先，需要了解几个...
vue实现导航栏吸顶效果 + 与内容联动
sfyjknvcx的博客
12-31 8182
大家好，我是南宫。今天写一篇博客来整理下最近刚解决的一个问题，那就是导航栏跟内容联动的问题。 简单说一下我想要的效果：写了一个宽度为屏幕100%的div，居中的部分是一个导航栏，水平排列，默认位于banner下，如果页面滚到了banner下面，要让导航栏固定顶部。如果页面滚到了下方对应的内容，那就高亮对应的tab标记。如果点击了tab，那就要让页面滚到对应的内容，并且让该tab高亮。 （效果是动态的，我随便截取一个场景来展示吧，比如我点击“应用场景”的时候，页面滚动到了对应的内容区域，并且对应的tab高
vue3+Element Plus功能组件封装——顶部导航（动态渲染+样式调整）
最新发布
布克吉的博客
08-13 1540
网页顶部的导航栏，一般由代码动态生成菜单数据在文件内统一配置，方便增删改查，导入后可自动生成导航菜单代码如下。
滚动页面一定距离后固定导航条
weixin_30663391的博客
10-01 312
需求：滚动页面到一定距离后，页面中间的导航条固定到页面的某个位置不动，滚回去时会复原。 document.addEventListener('scroll', function (event) { var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.bo...
导航条滑到页面顶端时固定的效果的实现
一个小土豆的博客
11-20 3512
这里要实现的效果是当导航条在用户滑动鼠标到达页面顶端时，固定在页面顶端的效果。 首先说一下原理：鼠标在页面上滑动时，会触发scroll事件，这时，只要做一个判断：当页面滑动的高度scrollTop()大于导航条离页面的高度时，给导航条添加一个固定的类，例如bootstrap中的 navbar-fixed-top类，而当页面滑动的高度小于导航条离页面的高度时，移除这个类，即可达到这个效果。 这里
html导航栏固定在顶部,将导航栏始终固定在窗口顶部:
weixin_26845891的博客
06-09 1万+
代码实例固定在窗口顶部*{padding:0px;margin:0px;}body, ul, li{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;text-align:center;}#main{width:20px;height:1000px;margin:0px auto;backg...
elementUI table 表头吸顶效果
m0_66743830的博客
07-10 5986
elementUI table 表头吸顶效果
页面滚动到指定位置的方法
anderlaw的博客
08-02 1万+
视口中可显示的信息是有限的，因此我们常需要页面滚动实现内容显示的切换,介绍几种实现方式： 纯html实现（锚点） 跳转按钮：<a href="#anchorName">点击跳转当前页面指定锚点</a> 设置锚点：<a name="anchorName">a标签锚点</a>、<p id="anchorName">id锚点</p&gt...
解决element-ui Container布局的顶部及侧边栏菜单固定，右侧main内容滑动
qq_51219034的博客
06-16 1706
注意el-aside收起的时候我之前写的是200px但是收起的时候会有空白，我就改为auto让他自适应，并且要在template的部分去行内书写，我在css部分写不生效。我的页面布局是用的这种。
vue3 element-plus Menu 菜单使用方法
热门推荐
m0_64531353的博客
03-18 1万+
第一步在app.vue里配置顶栏 <template> <div id="nav"> <div class="h-6" /> <el-menu default-active="/keng" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" r..
vue导航栏固定在顶部
05-19
要将Vue导航栏固定在顶部，可以使用CSS的`position:fixed`属性，将导航栏的位置设为固定的。具体实现步骤如下： 1. 在Vue组件中，给导航栏添加一个类名，比如`fixed-nav`，用于后面的CSS样式设置。 2. 在CSS中，为该类名设置如下样式： ``` .fixed-nav { position: fixed; top: 0; left: 0; right: 0; } ``` 这里，`position: fixed`表示将导航栏设置为固定定位，`top: 0`表示将导航栏顶部与页面顶部对齐，`left: 0`和`right: 0`表示将导航栏左右两侧与页面左右两侧对齐。 3. 在Vue组件中，使用该类名： ``` <template> <nav class="fixed-nav"> <!-- 导航栏内容 --> </nav> </template> ``` 这样就可以将Vue导航栏固定在顶部了。需要注意的是，在某些情况下，可能需要为页面主体内容添加一个`padding-top`，以免被导航栏遮挡。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值