Bilibili-Evolved 强制固定动态侧栏组件（fixed-sidebars）源码解析与实战指南-北京尧图网络

Bilibili-Evolved 强制固定动态侧栏组件fixed-sidebars源码解析与实战指南【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved本文围绕 Bilibili-Evolved 动态首页增强组件“强制固定动态侧栏”组件标识fixedFeedsSidebars内部样式 IDfixed-sidebars-style展开。它解决的是动态主页https://t.bilibili.com/顶栏与左右侧栏随页面滚动而消失、阅读动态时需要反复滚动回顶的问题组件通过sticky/fixed定位将顶栏和全部侧栏钉在视口内同时精细重排三栏宽度与边距。读完本文你将掌握该组件的功能边界、样式实现原理、响应式断点取值以及它与“禁止跳转动态详情”“动态过滤”等相邻组件的协作方式。一、组件定位只作用于动态主页的“布局钉住”功能组件的元数据定义位于 registry/lib/components/feeds/fixed-sidebars/index.ts核心声明如下const id fixed-sidebars-style const entry async () { const { disableProfilePopup } await import(/components/feeds/disable-profile-popup) disableProfilePopup() } export const component defineComponentMetadata({ name: fixedFeedsSidebars, instantStyles: [ { name: id, style: () import(./fixed-sidebars.scss), important: true, }, ], displayName: 强制固定动态侧栏, tags: [componentsTags.feeds], entry, urlInclude: [/^https:\/\/t\.bilibili\.com\/$/], })由此可以得到几个关键事实生效范围urlInclude使用正则/^https:\/\/t\.bilibili\.com\/$/精确匹配动态主页其他页面包括动态内嵌子路由不会加载该组件样式注入方式样式通过instantStyles在组件启用时立即注入且important: true即所有规则都会被提升为!important足以覆盖站点自身的样式表优先级附带行为组件入口entry会动态导入并调用disableProfilePopup关闭“正在直播”列表鼠标悬停弹出的用户 profile 小窗——这与固定侧栏的布局目标一致弹窗属浮层固定布局后浮层会出现遮挡问题因此一并禁用。二、样式核心三栏布局如何被“钉”在视口中组件全部样式位于 registry/lib/components/feeds/fixed-sidebars/fixed-sidebars.scss可以按职责拆成四个层次理解。2.1 顶层容器与顶栏sticky 方案#app { z-index: 0; } .z-top-container, .international-header { position: sticky !important; top: 0 !important; z-index: 1; }将动态页应用根节点#app的层叠上下文压到z-index: 0避免顶栏之外的元素浮到顶栏之上顶栏容器新版.z-top-container与国际化顶部条.international-header改为position: sticky并固定在top: 0实现“随滚动吸附在视口顶部”顶栏z-index: 1高于#app保证吸附后始终可见。2.2 浮层类弹窗全部改为 fixed.van-popper-avatar, .van-popper-vip, .van-popper-favorite, .van-popper-history, .van-popper-upload, .popover-channe, .popover-game, .popover-live, .custom-navbar { position: fixed !important; }头像、大会员、收藏、历史、投稿等van-popper-*下拉浮层以及频道/游戏/直播popover-*弹出层和自定义导航条custom-navbar一律转为position: fixed。这样它们在 sticky 顶栏被钉住后仍能正确基于视口定位弹出不会随文档流错位。2.3 侧栏固定与三栏重排.sticky-bar { display: none !important; } .left-panel, .right-panel { position: fixed !important; } .home-container { --left-width: 244px; --center-width: 632px; media screen and (min-width: 1921px) { --left-width: 12.71vw; --center-width: 32.92vw; } media screen and (min-width: 2497px) { --left-width: 317px; --center-width: 822px; } } .center-panel { margin-left: calc(var(--left-width) 8px) !important; } .right-panel { margin-left: calc(var(--left-width) 16px var(--center-width)) !important; }这是整个组件最核心的布局逻辑原版自带的吸顶占位条.sticky-bar被直接隐藏因为左右面板已改为fixed不再需要占位左右面板.left-panel/.right-panel改为position: fixed从文档流中脱离为了让脱离文档流的中栏不被左栏遮挡组件通过 CSS 变量统一管理三栏宽度默认左栏 244px、中栏 632px中栏margin-left为左栏宽度 8px 间距右栏margin-left为左栏 16px 中栏宽度响应式断点通过媒体查询覆盖变量值具体取值如下表视口宽度--left-width--center-width对应形态默认 1921px244px632px固定像素宽度≥ 1921px12.71vw32.92vw随视口等比例缩放≥ 2497px317px822px超大屏固定像素宽度2.4 新版动态布局.bili-dyn-home--member的适配针对 B 站新版动态主页容器样式单独处理.bili-dyn-home--member { --center-width: 632px; --gap: 8px; --fixed-offset: calc(var(--center-width) (100% - var(--center-width)) / 2 var(--gap)); section.sticky { position: static !important; } aside { position: fixed !important; margin: 0 !important; .left { right: var(--fixed-offset); } .right { left: var(--fixed-offset); } } main { width: var(--center-width); margin: 0 var(--gap); } media screen and (min-width: 1921px) { --center-width: 32.92vw; } media screen and (min-width: 2497px) { --center-width: 822px; } }可见新版布局采用了与旧版不同的“居中对称”策略左右aside用--fixed-offset中栏宽度两侧余量一半间距分别从右/左吸附定位main固定为中栏宽度并留出--gap: 8px间距同时把容器内原版section.sticky还原为static避免与固定的 aside 冲突。媒体查询断点同样沿用 1921px / 2497px 两档。三、配套逻辑为何固定侧栏时要禁用 profile 弹窗组件入口调用的disableProfilePopup位于 src/components/feeds/disable-profile-popup.ts其实现要点export const DisableProfilePopupClass disable-profile-popup export const disableProfilePopup async () { if (document.URL.replace(window.location.search, ) ! https://t.bilibili.com/) { return } const list (await select(.live-up-list, .bili-dyn-live-users__body)) as HTMLElement ... list.addEventListener(mouseenter, e { if (counter 0) { e.stopImmediatePropagation() } }, { capture: true }) }函数内部同样校验当前 URL 必须精确等于https://t.bilibili.com/与组件的urlInclude形成双重保险通过select(.live-up-list, .bili-dyn-live-users__body)等待“正在直播”列表渲染完成后在捕获阶段监听mouseenter并调用stopImmediatePropagation()从事件源头阻止原版“悬停显示 profile 弹窗”的行为代码中使用counter计数并暴露了对应的enableProfilePopupcounter--供其他组件的生命周期启用/禁用配合避免多次注册监听器导致计数错乱。四、与相邻组件的协作与约束固定侧栏并非孤立功能它在样式上还与动态页其他组件共享一套侧栏规则共享侧栏样式fixed-sidebars.scss末尾import ../feeds-panel-shared引入了 registry/lib/components/feeds/_feeds-panel-shared.scss 中的公共规则例如“正在直播”列表.live-up-list、.bili-dyn-live-users__body在默认状态、开启动态过滤body.enable-feeds-filter、禁用 profilebody.feeds-filter-side-block-profile三种场景下分别限制最大高度如100vh - 315px/100vh - 370px/100vh - 180px并统一隐藏滚动条。也就是说过滤组件与固定侧栏共用同一套侧栏高度预算直播列表滚动fixed-sidebars.scss中.live-panel .live-up-list { overflow: auto; include no-scrollbar(); }保证固定后的直播列表内部可独立滚动且不出现滚动条滚动容器复位.adaptive-scroll的min-height被取消、.scroll-content改回static避免原版的“自适应滚动”机制与fixed定位冲突防止出现双重滚动或滚动高度计算错误。此外该组件与“禁止跳转动态详情”registry/lib/components/feeds/disable-details/index.ts、“按类型或关键词过滤动态首页”registry/lib/components/feeds/filter/index.md等同属componentsTags.feeds分类可在动态页相关功能中一起开启。五、安装与使用Bilibili-Evolved 的用户界面中该组件显示名为“强制固定动态侧栏”位于动态feeds分类下打开脚本的设置面板进入“组件”或“动态”分类找到“强制固定动态侧栏”打开开关即启用由于urlInclude限定只有访问https://t.bilibili.com/时组件才会注入样式与逻辑其他页面不受影响关闭组件时通过instantStyles注入的样式会随组件生命周期移除样式 ID 为fixed-sidebars-style页面恢复原版布局。需要留意的前提与限制该组件以 B 站动态页当前 DOM 结构与类名为依赖.z-top-container、.left-panel、.right-panel、.bili-dyn-home--member等若站点改版导致类名变化需要同步更新 fixed-sidebars.scss 中的选择器固定侧栏占用的宽度按 244px / 632px及两档媒体查询覆盖值计算若与“自定义导航栏”等同样修改布局的组件同时开启需注意边距与弹窗定位的叠加效果。六、小结“强制固定动态侧栏”是一个典型的“样式为主、逻辑为辅”的布局增强组件样式层通过sticky顶栏 fixed侧栏 CSS 变量统一三栏宽度并针对新版容器与三档响应式断点分别适配逻辑层则调用disableProfilePopup禁用悬停 profile 弹窗避免浮层与固定布局冲突。理解它的实现index.ts、fixed-sidebars.scss、_feeds-panel-shared.scss、disable-profile-popup.ts对于二次开发同类“钉住布局”类组件或排查动态页样式冲突都有直接的参考价值。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Bilibili-Evolved 强制固定动态侧栏组件（fixed-sidebars）源码解析与实战指南

相关推荐

jQuery UI特效系统全攻略：15个内置动画特效清单与effect.js动画原理

老Mac升级macOS：OpenCore Legacy Patcher操作指南

InversifyJS安装配置避坑指南：6个步骤搞定reflect-metadata与装饰器陷阱

更多资讯

CI 里跑 Jev 决策，TaoToken 发 Key 给流水线

自动化设备机械加工件来料检验标准实战指南

2025强化学习顶会RLC：算法优化与行业应用趋势

尤雨溪官宣Rust格式化工具实测：比Prettier快45倍，Oxc工具链加速前端工程化

React高性能虚拟列表实战：动态行高、精准定位与容器自适应

ICESat-2 ATLAS高程控制点提取：从ATL03/ATL08光子数据到生产级应用

今日更新

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？