文章目录
今日天气:-15° ~ -2°
背景音乐
噪声健康提示:由于音频文件的音量不同,请您将设备音量调至 10%后根据情况适当调整。
Apple Watch 心电图
噪声健康提示:由于音频文件的音量不同,请您将设备音量调至 10%后根据情况适当调整。
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 内核得了,能省不少心)
不错不错,我没有(攒钱买。博客加个表情吧
@常瑞表情 😂😂😂
看到你这个封面图,我就想到今天看到一篇关于华强北生产的同型号手表的开箱,这模仿能力简直绝了。
@林羽凡是啊,不过听说他们最初以为是方形的边框做样子,结果S7还是原来的样子。
这波操作可以,实操性很强,不过数据也仅为基础参考
@欧乐安嗯,数据参考即可。
这个属性不是会一直跟随滚动到低嘛,滚动到文章结束不滚动是咋实现的~
还有评论框输入的字是黑的~
@若志奕鑫滚动就是 sticky 的特性,评论框那个忘记设置了,所以出现了小瑕疵 😂
@THY李姐了~
窦性心律 ? 我的好像是 心跳跳动比别人慢很多。
文章目录 之前也想加的 但是找不到合适的位置 放。
@叶开楗听说 jsdelivr 炸了,和你评论区加载不出来是一个问题吗 😳
@THY刚修复好 上次偷懒了 已经套cdn了 现在正常了。 刷新就好了。
我也想加这个功能来着,发现技术不过关。
@林羽凡搞啊,加这个还是方便阅读的。
大致失效总结酒两个原因
1.没有足够活动空间。
2.缺少方位,开始活动位置不明确。
@F嗯,你的站点怎么不能访问了啊
好久了,国内AW心电图终于获批了。以前都是用香港ip注册香港id开心电图,现在是不需要了。
@土拨许是啊,但估计也不是经常使用,尝个鲜。