文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

OpenSpec 项目实战（四） | 布局改造：给长列表装上导航骨架

选项行为A过滤显示 — 只渲染该分类的卡片，其他 DOM 移除。切换回「全部」恢复全部显示。B滚动定位 — 页面有全部内容，点击 Tab 滚动到对应分类标题位置。Tab 栏吸顶以方便切回。...切回「全部」恢复全部显示。滚动状态：切换 Tab 时回到顶部。因为切换后内容变了，保持旧滚动位置没意义。Tab 栏位置：不固定，跟随内容滚动。Tab 栏就在内容区顶部，不需要 sticky。...：useState + 过滤显示滚动重置：smooth scroll to topTab 栏样式：下划线高亮，Flexbox 横向布局不吸顶，不引入 URL 参数proposal.mdproposal...浏览器确认npm run dev 启动后逐项检查：首页加载：Tab 栏正常显示在标题区域下方，包含「全部」「内容创作」「开发工具」「数据转换」「文本处理」5 个 Tab默认状态：「全部」Tab 处于激活态...Explore 阶段讨论了四种导航方案：粘性 Tab、左侧栏、锚点跳转、分类标题吸顶。4 个分类用 Tab 刚好，侧边栏太重。

38711

导航栏滚动吸顶并自动高亮和点击跳转锚点

2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。...);//用户标识什么时候导航栏吸顶 const [activeNav,setActiveNav] = useState("");//与标识导航栏高亮 return div>...> div> } 好了，至此我们已经将内容和导航栏渲染好了，并且给内容部分增加ref，便于后续获取其内容，导航栏也增加何时吸顶的标识以及导航栏高亮的标识，另外增加了一个class为zhanfIx...的地址，因为当导航栏吸顶时，此处会因为空出位置，下面内容上移，而产生不和谐的效果，我们需要在其吸顶的同时增加一个div来占位，以增加平滑的效果。...下面我们来看一下导航栏吸顶和滑动到指定位置导航栏高亮的逻辑。

12.5K50
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    H5移动端适配IphoneX等机型

    图中，Iphonex机型在头部和底部新增了这两个区域，所以我们需要针对这类机型做些适配，方便我们的webapp的展示 h5做成的移动端页面，常见布局为头部+躯干+底部三栏模式，头部和顶部都是固定定位，躯干可里的内容可以滚动...css属性，而直接采用position: fixed;top：0等常规写法，就会出现头部的导航栏被手机自带的状态栏(显示电量信号等等)遮挡的情况，底部的导航栏被IphoneX自带的呼吸灯(图中手机底部的白条...” content=”width=device-width,viewport-fit=cover”> 然后，在公共的app.vue页面，我们每个组件的展示，都是在这里被router-view替换，所以可以在这里处理一下公共的头部顶栏...absolute’:’fixed’}”> 导航内容 div> div class=”placeholder”>div> 页面的css为： header...safe-area-inset-top); left: 0; height：88px; z-index: 999; } .placeholder{ height: 88px; width: 10rem; } } 这样写，这个头部导航栏就会位居于手机状态栏之下了

    1.3K10

    JS 吸顶导航，告别“回到顶部”

    本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么 如图： 吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方...当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部，一般吸顶导航栏还可以替换成文章标题栏，搜索框、tab条等等，例如百度糯米，天猫，淘宝最为常用。...明白了吸顶导航条的基本效果，下面写个简单的demo吧。 2、吸顶导航的实现方法 一、样式结构搭建 考虑到触发吸顶功能，需要为导航条设置触发后的样式。 <!...position: fixed; top: 0; left: 0; } div...> div> div> ps:内容区要够长，不然无法滚动。

    9.6K70

    Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

    前言 我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部 这是为了方便用户查看商品的各类信息或提交订单购物 也就是吸顶盒效果,那这个效果是怎么实现的...scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 当超过150像素时,把顶部的导航菜单设置固定...id="wrap" class="wrap"> div class="hd">div> div class="bd">div> div> ...总结 要想实现一个层始终固定在屏幕的顶部或底部,就不得不使用css的positon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容的浏览没有滑出导航菜单的可见范围时,是没有必要把导航菜单置顶的...,因此,在代码中就需要监听网页的滚动跳滑动事件 当超过一定的范围以后,才有必要为导航菜单设置固定的position样式 其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动条时到一定的范围,

    4.4K50

    前端开发者常见的英文单词汇总

    导航类 导航：nav 标题：title 摘要：summary 菜单：menu 子菜单：submenu 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：...leftsidebar 右导航：rightsidebar 页面结构布局 容器：container 页头：header 内容：content/container 页尾：footer 导航：nav 侧栏：sidebar...：visible 溢出：overflow 列表：list 样式 style 导航：nav 显示类型：display 广告图片：banner 页眉：header 文件命名 主要的：master 模块：module...其他 broswer 浏览器（客户端） html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php/c…) title 标题 body 身体 head 头 div...table headline)列 rowspan 合并行 colspan 合并列 collapse 合并 position 定位 relative 绝对定位 absolute 相对定位 fixed 固定定位

    3.8K21

    CSS固定定位与粘性定位4大企业级案例

    如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。...常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局 粘性定位 当滚动的高度>元素与浏览器的高度时，会以fixed固定定位显示...常见的应用有：吸顶盒导航,滚动吸附效果 1、楼梯式导航、浏览器右侧菜单、底部通栏（固定定位应用） 这三个案例用都是用固定定位来控制其与浏览器位置。...--顶部--> div class="siderbar">div>栏--> div class="main">div> 4、吸顶盒导航和常见左右吸附效果(粘性定位) 由于粘性定义目前只有火狐和Safari浏览器支持，但是这种效果在实际企业开发中必用。

    2.5K30

    当 Vibe Coding 遇上一致性灾难：分治开发的五层防御体系

    components/├── sidebar.html ← 整个侧边栏├── topbar.html ← 顶栏+面包屑├── filter-bar.html ← 通用筛选栏└─...─ pagination.html ← 分页器为什么：在之前的 15 页原型中，侧边栏分别是 15 份独立实现——任何修改要改 15 遍。...%}{% endblock %} div> div>div>每个页面只写 {% block content %} 内的内容，导航自动一致。...）Day 2：抽离组件创建 components/sidebar.html（统一定义侧边栏结构）创建 components/topbar.html（统一顶栏和面包屑）删除 15 个页面中的重复实现Day...侧边栏/顶栏/分页器等是否只有一份源码？□ 注入机制已选定？ Fetch / Nunjucks / React Router？□ 一致性校验脚本已写？ 交付前自动跑？□ 路由映射表完整？

    24300

    vue吸顶效果

    关于吸顶 吸顶效果在使得用户在滑动读取数据的时候把产品需要持续展示的控件及信息一直固定在屏幕上方，以便用户操作和交互。...产生背景   随着技术不断更新与用户审美不断提升，一些App中/浏览器中的常用交互也在对用户更加友好，在某些数据展示较多页面或者导航栏页面，为了将栏目划分，使得视图模块更加明显，吸顶效果便在此背景下孕育而生...需求分析 有了效果图，首先我们要分析一下结构： 吸顶上方数据 需要吸顶的元素 吸顶下方数据 接着我们逻辑走一下：(我们设吸顶元素为X) 在页面滑动距离 顶元素距离顶端距离时，不吸顶 否则，吸顶...30">这是吸顶下方的第{{index + 1}}条数据 div> div> // js ---- 备注   此demo在流行浏览器中运行问题不大，但是没有详测兼容性。如果要在生产上运用，务必做好各端兼容。

    2K21

    前端问答：如何解决固定头部遮挡内容问题

    在开发网页时，我们经常会遇到这样一个问题：当页面有固定在顶部的导航栏时，用户点击页面内的链接或按钮进行跳转时，目标内容可能会被固定导航栏遮挡住，导致用户看不到他们想要查看的内容。...场景介绍：固定导航栏遮挡问题 假设你正在开发一个购物网站，页面顶部有一个固定的导航栏，用户可以通过导航栏快速跳转到不同的商品类别。...这是一个非常简单却有效的属性，它允许我们在元素的顶部预留一些额外的空间，这样当页面滚动到该元素时，它不会被固定的导航栏挡住。 示例代码：解决遮挡问题 首先，我们来看一个简单的例子。...假设你的网站有一个固定在页面顶部的导航栏，下面是HTML结构： div class="fixed-header"> 导航栏 div> div id="content"> div> 导航栏使用了固定定位，因此它始终显示在页面的顶部： .fixed-header { position: fixed; top: 0; width

    1.4K10

    如何使用 CSS 设置和自定义水平和垂直滚动条

    除了默认滚动条外，您还可以在您的网站内设置自定义垂直滚动条。垂直滚动条可以帮助您的网站用户查看超出容器可见区域的内容。例如，侧边栏导航。您可以设计您的侧边栏以显示可滚动的导航项目列表。...在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：a）创建带有导航项目的导航栏b）将导航栏样式设置为侧边栏c）将侧边栏位置设置为固定d）使用滚动条管理项目的溢出a)....下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...下面的截图显示了侧边栏与正常内容流分开：固定溢出的侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。...从截图中可以看出，侧边栏的底部看起来不像设置在底部。这是因为内容比其容器的高度长。在下一节中，我们将学习如何防止导航项目列表显示在侧边栏之外。d).

    7.9K00

    实战 HTML & CSS：如何快速搭建一个响应式博客首页

    align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定，以便在页面滚动时保持在原位置...完善样式 参考预期的效果，关于核心内容目前还缺少的样式如下： 右侧广告栏，固定展示位置，不管文章列表如何滚动，始终固定显示在页面上； 右侧广告栏的内容居中展示； 各种边框阴影效果等； .content...768像素时隐藏侧边栏 */ } } 完整的代码 最终的代码还包括导航栏的字体显示格式调整，链接标签之间的间距调整等。...*/ align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定...，以便在页面滚动时保持在原位置 */ top: 0; /* 导航栏距离页面顶部的距离为0像素 */ left: 0; /* 导航栏距离页面左边的距离为0像素 */

    2.6K10

    如何使用CSS创建具有左对齐和右对齐链接的导航栏？

    使用 CSS，我们可以轻松创建导航栏，即菜单。此外，链接可以左对齐或右对齐。我们将使用 flex 来实现相同的目的。让我们看看如何。使用 创建导航栏 元素用于在网页上创建导航栏。...链接设置在以下两者之间： div for links -->导航栏，弯曲和位置固定显示屏设置为弯曲。...使用position属性的固定值固定位置：nav { display: flex; position: fixed; top:0; width: 100%; background-color...class="links" href="#">More Infodiv>链接与 Flex 向左对齐使用 flex 属性，将 Home、Login 和 Register 链接设置在左侧。...左侧柔性项的初始长度设置为 200px：.left-links{ flex:1 1 200px;}以下是创建具有左对齐和右对齐链接的导航栏的代码： <!

    5.7K10

    【CSS——效果实现】动态的 Tab 栏（蓝桥杯真题-6180）【合集】

    背景介绍 日常在使用移动端 APP 或访问 PC 端网站的时候，常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。...简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。 本题请实现一个顶栏固定的课程网站首页。...当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。...动态的 Tab 栏：设置页面的标题，显示在浏览器的标签页上。...position: sticky; top: 0px：使 Tab 栏在页面滚动时固定在顶部。 .buttons a 样式： 设置 Tab 栏中链接的样式，去除下划线，设置文字颜色和内边距等。

    75500

    HTML+CSS【规范】

    文章目录 前言 一、html规范 1.块级元素 2.行内元素 二、CSS规范 1.命名空间规范(了解) 2.CSS书写顺序 3.CSS书写规范 4.去掉小数点前的“0” 5.连字符CSS选择器命名规范...特点：和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变 功能：用于加强内容显示,控制细节，例如：加粗、斜体等等 A 块级元素与块级元素平级、内嵌元素与内嵌元素平级...4.去掉小数点前的“0” 5.连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器，为什么呢？...当该业务项目主要由固定的一个或多个人负责时，需要添加@author标识，一方面是尊重劳动成果，另一方面方便在需要时快速定位责任人。...11.CSS命名规范（规则） 常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度

    1.3K50

    Bootstrap响应式前端框架笔记十——导航栏相关组件

    Bootstrap响应式前端框架笔记十——导航栏相关组件     Bootstrap中提供的导航栏分为两种模式，使用nav-tabs类可以创建页卡模式的导航栏，使用nav-pills类可以创建胶囊模式的导航栏...除了默认的导航栏组件，Bootstrap中还支持自定义导航条，使用navbar类可以创建导航条容器，其内可以布局图标，文本，按钮和表单等，示例如下： 自定义导航条 导航条固定在顶部或底部，示例如下： 将导航栏固定在顶部 将导航栏固定在底部 div class="container...另外，本篇博客中所有的实例代码及显示效果，在如下地址中，需要的可以自行对照学习。 http://zyhshao.github.io/bootStrapDemo/navigation.html。

    3.6K20

    JEECMS v6版标签

    /include/页头顶栏.html"/] [#include "../include/页头导航栏.html"/] [#include ".....默认所有 orderBy :排序方式 0：ID降序 1：ID升序 2：发布时间降序 3：发布时间升序 4：固定级别降序，发布时间降序 5：固定级别降序，发布时间升序 6：日访问降序（推荐）7：周访问降序...（推荐） 19：周顶降序 20：月顶降序 21：总顶降序 excludeId：不包含的文章ID，用于按tag查询相关文章 作用：对显示的文章列表进行分页 具体例子： [@cms_content_page...默认所有 orderBy :排序方式 0：ID降序 1：ID升序 2：发布时间降序 3：发布时间升序 4：固定级别降序，发布时间降序 5：固定级别降序，发布时间升序 6：日访问降序（推荐）7：周访问降序...（推荐） 19：周顶降序 20：月顶降序 21：总顶降序 excludeId：不包含的文章ID，用于按tag查询相关文章 style_list：文章列表显示样式 文字列表 lineHeight：

    46010

    【Web前端】项目实训：CSS基本布局理解

    题 1：基于栅格布局的现代博客首页设计 题目要求： 创建一个博客首页布局，包含一个顶部导航栏、一个主要的内容区域（左侧为博客文章列表，右侧为一个侧边栏显示推荐内容），以及一个底部的页脚。...要求使用 栅格布局 来分割页面，顶部导航栏固定在顶部，内容区域左右分栏。 代码示例： 导航栏，第二行分为左右两栏，第三行是页脚。通过 ​​grid-template-areas​​ 确定每个区域的布局位置。...顶部导航栏：​​header​​ 元素被设置在第一行，占据整个页面宽度，居中显示导航文字。...页脚：​​footer​​ 固定在页面底部，跨越整个页面宽度，并居中显示内容。 响应式设计：通过 ​​grid​​​ 的灵活性，你可以轻松扩展布局，适应不同屏幕大小。

    1.5K10

    【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

    一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 上一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索栏 , 使用...固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ; 搜索栏下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索栏 覆盖 , 此处为 Banner 轮播图设置一个上外边距..., 避免显示在搜索栏下方 ; .banner { /* 上面的搜索栏是固定定位的 如果使用默认设置 该 Banner 栏会被搜索栏盖住 因此这里设置一个 44 像素的上外边距 *...上下各有 3 像素的外边距 , 左右各有 4 像素的外边距 ; 导航栏整体背景为白色 ; 在该横向导航栏中 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现...display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */ position: fixed; /* 固定定位盒子位置紧贴顶部

    4.4K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券