风记得的第565天星辰:Apple Watch 心电图、 position: sticky 实操与思考

文章目录
  1. 今日天气:-15° ~ -2°
  2. 背景音乐
  3. Apple Watch 心电图
  4. 加入文章目录显示
  5. position: sticky 实操感受
  6. position: sticky 相关问题
  7. 第 565 天结语
今日天气:-15° ~ -2°
背景音乐

噪声健康提示:由于音频文件的音量不同,请您将设备音量调至 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 内核得了,能省不少心)

本文稿内容来源于“风记星辰”,请您在需要时注明。
在本文末若注明“参考、扩展”等字样均为涉及到转载部分第三方内容,具体说明请查看 版权及豁免条款

发表评论

您的电子邮箱地址不会被公开。

Captcha Code

18条评论风记得的第565天星辰:Apple Watch 心电图、 position: sticky 实操与思考
  1. 看到你这个封面图,我就想到今天看到一篇关于华强北生产的同型号手表的开箱,这模仿能力简直绝了。

  2. 这个属性不是会一直跟随滚动到低嘛,滚动到文章结束不滚动是咋实现的~
    还有评论框输入的字是黑的~

  3. 窦性心律 ? 我的好像是 心跳跳动比别人慢很多。

    文章目录 之前也想加的 但是找不到合适的位置 放。

  4. 大致失效总结酒两个原因
    1.没有足够活动空间。
    2.缺少方位,开始活动位置不明确。

  5. 好久了,国内AW心电图终于获批了。以前都是用香港ip注册香港id开心电图,现在是不需要了。