Navbar不固定，页面滚动后不会固定在页面上方

最新推荐文章于 2024-07-03 17:07:00 发布
最新推荐文章于 2024-07-03 17:07:00 发布
阅读量2.1k 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heheda123321123/article/details/107672285
版权
本文探讨了在Vue项目中，Navbar在页面滚动后不固定的问题。通过对比Vue-element-admin和Mall项目的源码，发现Mall缺少了固定Header的CSS样式。解决方案是在Layout.vue中添加相应的CSS和JS代码，并在src/styles/variables.scss中调整相关变量。完成这些修改后，Navbar将在页面滚动时保持固定在顶部。
摘要由CSDN通过智能技术生成

Navbar不固定，页面滚动后不会固定在页面上方

描述：在使用热门项目mall的时候，发现Navbar并不是固定的，在使用Vue-element-admin项目的时候，Navbar是可以固定的。比对源码发现里面的区别在Layout.vue的css样式中

区别：mall的css样式比admin少了不少，主要是fixed-header，下列代码中将展示相比admin，mall所缺少的代码

  1. 在Layout.vue添加如下代码

    • html部分

      <!--在navbar组件中增加class-->
<navbar class="fixed-header"></navbar>

    • js部分

      classObj() {
最低0.47元/天 解锁文章
李木有大本事
关注
uni-app 导航栏滚动后固定到顶部
qq_59795720的博客
05-27 2937
完整代码 <template> <view class="content"> <view class="wrap"> <view class="list" v-for="i in list_data"> <text>{{ i }}</text> </view> </view> ...
vue导航栏顶部导航_如何在我的视口顶部保留导航栏？
cumian8165的博客
08-20 2605
vue导航栏顶部导航If you're working on the Product Landing Page project and are having trouble with some of the user stories, you're not alone. 如果您正在从事“ 产品着陆页”项目，并且遇到一些用户故事方面的麻烦，那么您并不孤单。 User story #13 gives...
uni-app中关于van-nav-bar的坑
qq_20501625的博客
10-28 6293
Hello，大家好！又遇到坑啦！！！ 这次的坑是什么呢，那就是van-nav-bar。 官方的Vant-Weapp告诉我们应该这么用，但是放到uni-app就必须要这么用： <van-nav-bar title=“标题” left-text=“录入” right-text=“清空” left-arrow @click-left=“inputNames” @click-right=“cli...
Vant组件NavBar和原生H5适配刘海屏，解决顶部不固定问题
05-31 7069
使用vant2在IOS有刘海屏手机上全屏展示会覆盖顶部，需要标题栏固定顶部，Tabs标签页固定在标题栏下方，都不随页面滑动 项目依赖： "dependencies": { "axios": "^0.27.2", "core-js": "^3.6.5", "vant": "^2.12.47", "vue": "^2.6.11", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, "devDepend
uniapp自定义头部导航栏在页面整体滚动时固定在顶部
最新发布
PolarisWay的博客
07-03 772
在uniapp中，使用uni-nav-bar组件定义自定义头部导航栏，但是在页面超出时，会带着头部导航栏一起滚动，以下代码实现头部导航栏固定在顶部，剩余内容正常滚动。
vanpopup 高度_van-popup使用van-nav-bar头部或底部无法固定问题
weixin_39636333的博客
12-30 2328
一直遇到一个问题，使用vant弹框里面有顶部导航栏和底部导航栏的时候，如果数据量多需要滚动页面的情况下，底部和顶部导航栏的位置会跟随移动。找了好久 一直没有找到解决的办法。今天自己终于弄出来了。主要步骤：1.首先给van-popup设置overflo:hidden(关键-不要让外层滚动)2. 给你需要滚动的层加高度，并且加overflo:auto 就可以了title="全部回复"class="db...
小程序固定头部实现：van-nav-bar插件
℡メ㏑╭ァ小凯
02-29 842
页面使用，放开注释的地方就可以显示左边按钮。
页面导航栏在鼠标向下滑动后会漂浮在顶部的设计（已解决）
数据库爆破专家的博客
04-26 6154
1
Bootstrap实现渐变顶部固定自适应导航栏
08-31
当页面滚动到`.navbar`距离顶部超过50像素时，添加`top-nav`类，这个类将改变导航栏的背景和内边距，实现渐变效果。当导航栏回到顶部50像素以内，移除这个类，恢复初始状态。 总结起来，创建一个Bootstrap渐变顶部...
axure手机页面设计说明_Axure中移动端原型设计方法
weixin_33277412的博客
01-13 2604
在使用Axure设计移动端原型的应用方面，我总结出了两种常用的方法。第一种是更适合在移动端进行演示的设计方法，大家可以参考我之前已经分享过的一篇教程：使用Axure打造最佳的移动端交互原型教程，使用这种方法输出的原型在手机设备上进行演示时可以达到跟真实APP几乎一致的展示效果及交互体验。在今天我将分享另外一种基于设备模板的移动端原型设计方法。什么是基于设备模板的移动端原型设计方法？简而言之就是在A...
h5app实现在最上方时透明，下拉后出现
05-13
这个效果可以通过监听滚动事件来实现。当页面滚动距离大于某个阈值时，将顶部...在这个示例中，当页面滚动距离大于 100 时，导航栏的背景色会变为白色（#ffffff），否则为透明。你可以根据自己的需要调整阈值和背景色。
NavBar-顶部标题栏
weixin_49352307的博客
03-13 597
left-arrow: 左边出现箭头。left-text:左边文字。title：标题名设置。flxed：固定头部。
一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头
binggoling
01-07 1456
目录一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头一、效果二、配置实现 一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头 一、效果 动态设置展示sidebar系统Logo、固定navbar头 界面设置 二、配置实现 1）新增文件：src\components\RightPanel\index.vue 直接拷贝my-vue-element-admin的src\components\RightPanel\ind
uniapp使用uni-nav-bar自定义顶部状态栏和导航栏
热门推荐
ㄏ、Forgetˊ的博客
10-20 1万+
使用组件 问题描述 在使用NavBar组件后，其顶部状态栏和顶部导航栏会在大部分机型下表现为高度64px，在某些特殊机型下会表现为高度88px（如iPhone X）。 页面内使用了uView的tabs标签组件，配合Swiper轮播图组件作为可轮播切换的商品列表页。 tabs组件要求需要吸顶，这就引出了问题，因为使用到的组件为外部引入，对于其内部样式的修改，需要通过获取（顶部状态栏 + 顶部导航栏）的高度后重新设置吸顶的高度。 解决方案 （顶部状态栏 + 顶部导航栏）的高度几乎所有页面适用，所以写在mixi
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
ALKAO_UA的博客
06-01 8676
微信小程序实现自定义导航栏，可滑动导航栏和非滑动导航栏欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的
前端页面滚动时固定导航栏
HWJBJ的博客
08-06 2731
vue + vant 1、如果导航栏就在顶部时，只需样式固定在顶部就好 2、但是想要固定的部分，不在导航栏，需要页面滚动到导航栏时固定，划回去的时候又不要固定时，可参考以下代码 Video_2021-08-06_102128 html部分 <!-- 上面有一些其他显示的东西--> <div id="yj_bot"> <!-- 需固定区--> &
解决ios7中navigationbar位置显示不固定的问题
sunyu2033的专栏
03-25 541
在iOS 7中，苹果引入了一个新的属性，叫做[UIViewController setEdgesForExtendedLayout:]，它的默认值为UIRectEdgeAll。当你的容器是navigation controller时，默认的布局将从navigation bar的顶部开始。这就是为什么所有的UI元素都往上漂移了44pt。 修复这个问题的快速方法就是在方法- (void)vi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值