码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Vue中使组件置顶后悬浮


    前端用Vue框架做一个网页,有一个需求是,对于头部组件中的SubNav和MenuNav在滑动置顶后需要悬浮在可视区顶部。

    网页的主界面为:

    需求:

    如上图所示的为头部组件结构,目前只是初步搭了一个框架,具体的还没精细

    1. SubNav需要固定在顶部

    2. 划动页面时,若MenuNav栏置顶,需将其固定在顶部 

    想法:

     1. SubNav已经在顶部了,直接固定

     2. MenuNav 通过添加监听事件scroll,获取划动的距离,根据css样式设定的距离,达到值后添加样式进行固定

    1.实现SubNav固定

    因为考虑到它本身就在顶部,所以我直接选择固定

    1. .subnav{
    2. display: block;
    3. background-color: #2370b7;
    4. margin: 0 0 0 0;
    5. width: 100%;
    6. height: 35px;
    7. position: fixed;
    8. z-index: 999;
    9. }

     2.MenuNav划至顶端固定

    setup中定义了一个布尔变量,navBarFixed 初始为false,Vue对它进行监听,如果它变为true,则动态添加固定的响应样式。 

    1. <div class="nav" :class="navBarFixed == 1 ? 'navBarWrap' : ''">
    2. setup(){
    3. let navBarFixed = ref(0)
    4. function handlerScroll(){
    5. var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    6. if(scrollTop >= 82){
    7. navBarFixed.value = 1
    8. }else{
    9. navBarFixed.value = 0
    10. }
    11. }
    12. return {
    13. navBarFixed,
    14. handlerScroll
    15. }
    16. # css
    17. .navBarWrap {
    18. width: 70%;
    19. position:fixed;
    20. top: 35px;
    21. z-index:999;
    22. }

     

  • 相关阅读:
    设计模式-工厂方法模式(C++)
    ClickHouse(03)ClickHouse怎么安装和部署
    ZEMAX | 如何创建复杂的非序列物体
    什么是工作流引擎
    Vue3.0路由拦截
    openwrt 23.05.2 稳定版本 导入树莓派4B
    Unity VR 零基础开发之 Pico4 MR
    vue3组合式API实现父组件触发子组件中的方法 | vue3中ref的用法 | defineExpose的使用场景
    jdk的bin目录下的工具
    uniapp合法域名配置
  • 原文地址:https://blog.csdn.net/m0_56698268/article/details/126270501
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号