页面滚动时导航栏固定在顶部-吸顶

最新推荐文章于 2023-09-04 14:47:56 发布
最新推荐文章于 2023-09-04 14:47:56 发布
阅读量895 收藏 6
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joe_324/article/details/113105817
版权

html部分

<div class="btnBox">
  <span class="topTitle">阶段详情</span>
  <span>
    <el-button size="small" type="primary">一键折叠</el-button>
    <el-button size<
最低0.47元/天 解锁文章
joe_324
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
Element--el-tabs固定在顶部
m0_67265464的博客
02-25 2174
解决方案 .el-tabs--card { height: calc(100vh - 110px); /* overflow-y: auto; */ } .el-tab-pane { height: calc(100vh - 110px); overflow-y: auto; }
el-table固定某一行在顶部
最新发布
阿荣的博客
09-04 1521
el-table表格固定某一行在顶部，或者修改某一行样式
记录一下 如何将el-tabs头部固定在顶部
普通前端一枚
05-29 868
【代码】记录一下 如何将el-tabs头部固定在顶部。
监听 scroll 使元素产生吸顶效果
高先生的猫
05-11 466
一、判断滚动像素值 1.1 window.scrollY（别名：pageYOffset） 返回文档在垂直方向已滚动的像素值。为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。 1.2 Element.scrollTop 获取或设置一个元素的内容垂直滚动的像素数。 二、监听滚动事件 在 document 视图或者一个 element 在滚动的时候，会触发元素的 scroll 事件。 三、示例 // 监听 window.addEventList
吸顶导航栏、吸顶导航栏.zip
05-11
`属性，将导航栏设置为固定在窗口顶部，不受页面滚动影响。同时，通过`top`属性调整其与顶部的距离。 2. JavaScript监听滚动事件：使用JavaScript或jQuery监听滚动事件，当页面达到一定位置时，通过改变CSS样式实现...
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
当滚动距离超过特定值（这里是`329`像素）时，`whether`设置为`true`，使得tab列表固定在顶部；否则，将其设回`false`。为了使这个滚动监听生效，我们需要在`mounted`生命周期钩子中添加滚动事件监听器。 关于...
css锚点定位被顶部固定导航栏遮住的解决方案
11-21
标题中的“css锚点定位被顶部固定导航栏遮住的解决方案”主要涉及到的是网页设计中一个常见的问题，即如何在存在固定在顶部的导航栏时，正确地利用HTML的锚点（Anchor）功能进行页面内部跳转，而不让标题被导航栏...
微信小程序顶部可滚动导航效果
08-28
微信小程序顶部可滚动导航效果是指在微信小程序中实现顶部可滚动的导航分类效果。该效果通过使用 scroll-view 组件横向滚动，类似 tab 选项卡的效果，内容使用类似模板方式引用，可以重复利用。 实现该效果需要使用...
el-tabs标签页标签位置吸顶
m0_46403770的博客
03-18 984
el-tabs标签位置吸顶
固定顶部位置悬浮的导航菜单
11-04
CSS3仿花瓣网固定顶部位置悬浮的导航菜单
解决 element-ui 的 el-table 自动吸顶（支持fixed，keep-alive的使用）
weixin_41308436的博客
03-01 5086
el-table不设定高度,同时表头固定顶部，吸附顶部
vue element 表头吸顶 并且可以随着大盒子左右滚动
qq_36940740的博客
08-21 3545
当前需求是 1.整个页面可以垂直滚动 2.整个红盒子可以横向滚动（横向滚动时上面的盒子固定不动） 3.上面的盒子高度不固定 4. 垂直滚动时table的表头到达顶部时吸顶。 解决方案： 需求1 不提。 需求2 红盒子横向滚动 不提。上面的盒子固定不动 需要使用sticky粘性定位。 需求3 高度不固定会对需求2以及需求4有影响。 需求4 因为我的table头不仅要吸顶 还要可以横向滚动 所以动态给表头添加position :fixed 明显就不合理了。需要给它添加position:ab..
vue 移动端吸顶效果，开始随页面滚动，滚动到指定位置固定在顶部或者固定在指定位置
好巧的博客
12-05 1万+
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。不同组件多次使用的话，建议在 src 下新建一个 common 文件夹，创建 stickySlot.vue 文件，方便多次复用。为了方便演示，这里使用了for循环的方法将屏幕撑满，直接将全部代码复制运行就能看到效果。通过设置top的值，控制需要固定在什么位置，0是顶部，值为number(px)// 需改为对应的组件存放的路径。// 使用假数据撑满屏幕。
vue项目中滚动时导航吸顶效果(固定定位)
^_^
07-16 4574
什么是吸顶?就是头部在顶部被页面吸住了，大白话就是固定定位 效果图 吸顶组件 作为参考案例 <template> <div class="app-header-sticky"> <div class="container"> <RouterLink class="logo" to="/" /> <AppHeaderNav /> <div class="right">..
el-table 选择列合计，fixed固定某列，合计行放在表格上方，设计合计行样式
金乌的博客
11-25 3586
选择特定的几列进行合计，并将el-table的合计行放在表格上方，并修改合计行样式。关键代码：show-summary :summary-method="getSummaries" ；不写summary-method方法，默认计算所有数字列
滚动页面，实现导航栏固定在顶部（吸顶效果）
weixin_43772742的博客
05-13 1812
利用position的sticky属性 position: sticky; position: -webkit-sticky; // 兼容 -webkit 内核的浏览器 top: 10px; // 必须设一个值，否则不生效 万能方式处理 思路：前提时需要监听scroll事件 1）滚动条不动时，是静态相对定位状态relative 2）当页面滚动超出设置距离时，js改变样式属性 切换定位状态变成fixed，同时再给top设置一个值 css部分
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
热门推荐
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
el-table滚动顶部时固定表头实现
FORGIVE66的博客
06-23 1923
首先需要在mounted里面创一个滚轮事件 mounted() { window.addEventListener("scroll", this.handleScroll, true); }, 然后定义这个事件 handleScroll() {let scrollTop = window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop; //滑动的距离 let he
导航栏滚动的时候置顶html,html鼠标滚动后导航栏吸顶效果
05-16
可以通过CSS和JavaScript来实现导航栏滚动时的置顶和吸顶效果。 首先，在HTML文件中，将导航栏放在一个固定的div容器中，如下所示： ```html <div class="navbar-container"> <nav> <!-- 导航栏内容 --> </nav> </div> ``` 接着，在CSS中设置navbar-container的样式，使其固定在浏览器的顶部，并且设置一个高度，避免后续内容覆盖导航栏： ```css .navbar-container { position: fixed; top: 0; width: 100%; height: 60px; /* 导航栏高度 */ background-color: #fff; /* 导航栏背景色 */ z-index: 999; /* 确保导航栏在最上层 */ } ``` 然后，在JavaScript中监听浏览器的滚动事件，当滚动距离超过了navbar-container的高度时，将其固定在浏览器的顶部。否则，将其放回原来的位置。 ```javascript window.onscroll = function() { var navbarContainer = document.querySelector('.navbar-container'); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop >= navbarContainer.offsetHeight) { navbarContainer.style.position = 'fixed'; navbarContainer.style.top = '0'; } else { navbarContainer.style.position = 'static'; } } ``` 这样，就可以实现导航栏滚动时的置顶和吸顶效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值