Bilibili Evolved 自定义顶栏搜索框固定功能解析

问题背景

在使用Bilibili Evolved脚本时，部分用户发现顶部的搜索栏在页面滚动时会消失，这与YouTube等视频平台保持搜索框常驻的设计不同，给用户带来了不便。这个问题主要出现在开启了"自定义顶栏"功能但未正确配置的情况下。

技术原理

Bilibili Evolved的自定义顶栏功能通过CSS定位和JavaScript事件监听实现。当用户滚动页面时，脚本会检测滚动位置并决定是否保持顶栏固定。搜索框作为顶栏的一部分，其固定行为受全局固定选项控制。

解决方案详解

要解决搜索框不固定的问题，需要正确配置自定义顶栏的"全局固定"选项：

1. 打开Bilibili Evolved的用户设置面板
2. 找到"自定义顶栏"功能模块
3. 启用"全局固定"选项
4. 保存设置并刷新页面

启用该选项后，脚本会为顶栏添加CSS的position: fixed属性，使其始终保持在视口顶部，同时通过JavaScript调整页面布局，避免内容被顶栏遮挡。

功能对比

• 未启用全局固定：顶栏随页面滚动消失，需要返回顶部才能使用搜索功能
• 启用全局固定：顶栏始终可见，搜索框随时可用，体验类似YouTube

实现细节

在技术实现上，Bilibili Evolved通过以下方式确保顶栏固定：

1. 监听页面滚动事件
2. 计算滚动距离阈值
3. 动态添加/移除固定定位样式
4. 调整页面主体内容的padding-top值
5. 处理可能的布局重绘问题

最佳实践建议

1. 如果追求原生B站体验，可以关闭自定义顶栏功能
2. 如需精简界面并保持搜索可用，建议开启自定义顶栏+全局固定
3. 在移动端使用时，固定顶栏可能影响有限屏幕空间的利用，需权衡利弊

总结

Bilibili Evolved的自定义顶栏功能提供了灵活的界面定制选项，通过正确配置"全局固定"选项，用户可以实现在页面滚动时保持搜索框常驻的效果，提升视频浏览和搜索体验。这一功能体现了脚本对用户体验细节的关注，也是Bilibili Evolved广受欢迎的原因之一。