今日天气：-15° ~ -2°

背景音乐

Apple Watch 心电图

其实 Apple Watch 早就心电图功能，如今正式在国内获批。Apple 最新推送的用于 WatchOS 8.3 和用于手机的 iOS 15.2 新版系统，心电图功能终于在国内上线。

使用创新的传感器和 app 测量血氧水平，时刻监测自己的心率，还有正念训练和睡眠跟踪等出色功能，全方位守护你的健康。有 Series 7 在手，更多健康信息一目了然。

来自 Apple.com 的文案

更新后就拿我的 Apple Watch Series 6 试了一下，下面是测试结果：窦性心律，当然不能作为医学参考。

加入文章目录显示

我最近又产生了一些见解，为了观看者更加准确定位这篇文章。我决定去加一个文章目录的版块并且决定不使用任何 JS 仅靠 CSS 来实现，这让我陷入了一段思考。

使用布局 position: absolute 倒是可以定位到右边，可是随着页面下滑不能固定是一个问题。而 position: fixed 固定定位倒是可以固定，可是在不需要它的时候也始终固定在那里。

那么，现在使用 PC 端访问本站文章页时，你会看到当你经过文章目录并且下拉过程中会伴随着你，当父元素高度结束时，它也停止固定继续随着页面滚动。这就是 position: sticky 粘性定位彰显出来的作用。

position: sticky 实操感受

目前为止除了 IE 外的最新版本浏览器都支持 position: sticky，对于个站而言该属性兼容性无需担心。当我使用这个属性时，滚动定位的问题是解决了，可是如何让它在旁侧？使用 margin 即可解决固定宽度并在右侧减去该宽度。

可是又发生了一个问题，因为没有脱离文档，方块过去是过去了，可是原有空间依然占用。经过思考，我发现使用浮动布局 float 即可解决。

滚动前

滚动后：发生重叠

浮动前：占用空间

浮动后

如此一来即可不使用 JS，仅依靠下面几行 CSS 代码即可以轻量解决问题。

position: sticky;
top: 0;
width: 30%;
margin-right: -30%;
float: right;

position: sticky 相关问题

我在实操过程中，发现以下几点会导致异常

• 父元素高度小于 sticky 元素高度，会失效
• 父元素设置 overflow: hidden，会失效
• sticky 元素仅设置 bottom，会失效
• 同父元素内相邻或相隔元素设置清楚浮动 clear: both，仅在Firefox 火狐浏览器中出现频闪异常 😐

第 565 天结语

研究一个事情还是十分有趣的，虽然在这个过程中会死一些脑细胞，但迎来的是全新的知识。（还要吐槽下全世界浏览器干脆统一都是 chrome 内核得了，能省不少心）