登录 注册

[js] 顶栏融合 - 参考 qyl 主题的顶栏融合

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28442 引用 • 119754 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    285 引用 • 1984 回帖
3 引用
合并顶部标题栏和标签栏 • HugZephyr
[css][js] 思源笔记使用体验增强方案分享 • Adaxi
求一个 QYL 主题“顶栏融合”功能的 CSS 代码 • HugZephyr
1 操作
HugZephyr 在 2025-08-11 14:44:41 更新了该帖
佛山 位置
3 感谢
1 关注
2 收藏
1 赞同
3 引用
1 操作
16 回帖
7
5
3
330 229 1 2 98

相关帖子

16 回帖
[js] 顶栏融合 - 参考 qyl 主题的顶栏融合

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons • • 4 评论
    付费者 捐赠者

    nb👍

    直接把 qyl 代码拿来用的, 哈哈
    HugZephyr •
    @HugZephyr 不反对分享出来，但是连个来源都不标嘛，甚至特意把 QYL 的前缀改了
    queguaiya •
    @HugZephyr 我瞎了，帖子标注了哈哈哈我没看到 😂
    queguaiya •
    @queguaiya 可能不明显
    HugZephyr •
  • wenbocn • • 1 评论
    付费者

    使用了“替换背景图片”插件，如下能有一条显示出背景图片的空余部分，希望能够改进一下，谢谢！

    image.png

    1 回复
    我有空看下, 这个很难做到兼容比较好
    HugZephyr •
  • yuhl •

    好用！比前些天 css 的方案适配性好！感谢！

  • HugZephyr • • 1
    付费者 作者

    在这里加一段代码

                .HZFusionTop > .layout-tab-container {
                margin-top: -8px;
            }

    image.png

    1 回复
  • wenbocn •
    付费者

    好用，感谢！👍

  • wilsons •
    付费者 捐赠者

    建议顶部栏和 tab 不要用固定高度，用户可自定义，用户可能不是用思源默认的高度，比如我。

    我自定义高度后(减小默认高度)tab 就有一部分隐藏到顶部了。

    image.png

    1 回复
    1 操作
    wilsons 在 2025-09-19 16:53:23 更新了该回帖
  • HugZephyr • • 1 评论
    付费者 作者

    兼容性好难搞

    我本地也是改了样式, 调的我头疼, 能用就行, 已经不想维护了

    image.png

    2 回复
    哈哈哈，确实是，我每个代码也是花少量时间完成，大量时间做兼容。所以，分享不容易，自用简单的多。💪
    wilsons • • 1 赞同
  • wilsons • • 1
    付费者 捐赠者

    https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E9%A1%B6%E6%A0%8F%E6%A0%87%E7%AD%BE%E8%9E%8D%E5%90%88.js

    我简单修改了下，支持自定义 tab 高度和右侧工具栏自滚动显示。

    PixPin20250919164714.webp

    1 回复
  • wilsons •
    付费者 捐赠者

    大佬，这个标签类似谷歌浏览器的样式可以分享下吗

    image.png

    简单实现了

    image.png

    1 操作
    wilsons 在 2025-09-19 18:22:36 更新了该回帖
  • wenbocn •
    付费者

    请问大佬能否赋予 tab 标签这种自动滚动的形式，对于小白来说，工具栏中的内容并不多，多的是 tab 标签个数，谢谢！

    2 回复
  • wilsons • • 1
    付费者 捐赠者

    此前分析有误，已实现。

    1 回复
    1 操作
    wilsons 在 2025-09-29 14:53:58 更新了该回帖
  • wenbocn •
    付费者

    明白了，感谢回复！

  • wilsons •
    付费者 捐赠者

    不好意思，刚才的回复有误，思源有两套，一个滚动的和一套选择的。

    刚刚实现了这个功能，代码已更新至 1.2。

    把 useTabAutoScroll 参数设置为 true 即可。

    @wenbocn 1.3 实现了固定标签不滚动效果，不过，除了酷炫没啥用，因为要移到固定标签上，鼠标还是要过去，那么不固定也是滚动到前面，二者没啥差别。
    PixPin20250929172607.webp

    1 回复
    2 操作
    wilsons 在 2025-09-29 18:07:52 更新了该回帖
    wilsons 在 2025-09-29 17:36:55 更新了该回帖
  • wenbocn •
    付费者

    您好，是不是还有什么设置没有在 js 中，需要 css 代码调节一下高度，我的显示和您的不太一样呢。

    image.png

    2 回复
  • HugZephyr •
    付费者 作者

    估计是你主题的问题, 改下这个试试, 调大一点

    image.png

  • wilsons •
    付费者 捐赠者

    👍 恭喜完美解决！

    确实这个代码和样式与自身的环境关联性高。并不一定在所有样式中表现完美。

    分享的代码是在原来代码基础上尽量少的改动实现，而我自己用的是根据我本地环境进行了高度和样式调整的，与分享的代码有出入的。

请输入回帖内容 ...
HugZephyr
佛山
回帖
539
 帖子
80
 积分
14984