前面我写了一篇文章:悬浮的内容直接显示在侧边栏,里面提到了我想要的一种功能,将悬浮内容显示在侧栏。
当被告知短期内不会被实现后,我决定自行调整,以达到想要的效果。
现在把我的实现方法放出来,如果想要拥有同款效果的朋友可以跟着我的脚步操作。
先来段演示
1)演示中除了点击「钉住」按钮和「关闭」按钮以外,没有再点击过鼠标了,全是悬浮的效果。
2)要实现这样的效果只需要一个前提:处于左右双编辑栏状态(主要是分成左右两侧,左侧内容不重要)
3)其实代码实现也十分简单:
3.1)找到并打开主题文件,theme.css 或者 custom.css
3.2)在「末尾」加入这段代码:
.block__popover.block__popover--move.block__popover--open{
min-height: 100% !important;
max-width: 50%;
left: 0 !important;
top: 0 !important;
}
3.3)解释:
- 设置最小高度为「100%」
- 设置最大宽度为「50%」
- 设置距离「左 0 上 0」(已知
position
是absolute
) - 关键点:
!important
必不可少,如果没有,「left」和「top」会被覆盖,导致无效。
4)问题:
- 虽然显示位置的问题解决了,但是位置也因此被固定死了,你将再也无法通过拖动来改变页面的位置。同时悬浮页面的相对层级仍旧是无法改变的,是按顺序一层层叠加的,因而这种方案不适宜多个「钉住」页面交叉查看的场景。
5)结束:
- 其实这只是一种模拟实现,通过 CSS 调整宽高位置以达到相类似的效果,并没有实际用到侧边栏或达到侧边栏的效果,但是对于我来说,已经差不多够用了。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于