
在网站构建中,左右两侧固定广告一直是常见的布局,但它会一直占用屏幕,存在不友好体验。如今,随着前端技术的不断革新,涌现了一种新型布局,实现了左右两侧固定广告根据页面滚动自动隐藏的功能。
实现这一效果其实很简单,不需要知道元素的高度。我们可以通过检测元素是否出现在屏幕上或从屏幕上消失来控制显示隐藏。
以下是实现代码:
Document 标题
滚动
到底
我就
不见了测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
当你看到我,
左边的文字就消失
通过利用IntersectionObserver API,可以检测元素是否出现在屏幕上,进而控制左栏的显示隐藏。这种方式不需要知道元素的高度,便可实现灵活的侧边栏隐藏效果。










