在网站构建中，左右两侧固定广告一直是常见的布局，但它会一直占用屏幕，存在不友好体验。如今，随着前端技术的不断革新，涌现了一种新型布局，实现了左右两侧固定广告根据页面滚动自动隐藏的功能。
实现这一效果其实很简单，不需要知道元素的高度。我们可以通过检测元素是否出现在屏幕上或从屏幕上消失来控制显示隐藏。
以下是实现代码：
Document h1 { text-align: center; } .text { margin-left: 100px; } .left { position: sticky; left: 0; top: 10px; } .end { margin-bottom: 100px; }标题
滚动
到底
我就
不见了测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
当你看到我，(function () { /** * 底部的文字 * @type {HTMLDivElement} */ const endEl = document.querySelector('.end'); /** * 左边的文字 * @type {HTMLDivElement} */ const leftEl = document.querySelector('.left'); // 监控end元素是否出现在屏幕上 const obs = new IntersectionObserver((entries, observer) => { // 底部的文字是否已出现 if (entries[0].isIntersecting) { leftEl.style.display = 'none'; } else { leftEl.style.display = ''; } }, { rootMargin: '0px', threshold: 0.1, }); // 观测底部的文字 obs.observe(endEl); })();
左边的文字就消失
登录后复制
通过利用IntersectionObserver API，可以检测元素是否出现在屏幕上，进而控制左栏的显示隐藏。这种方式不需要知道元素的高度，便可实现灵活的侧边栏隐藏效果。
以上就是如何使用IntersectionObserver API实现左右两侧广告根据页面滚动自动隐藏？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2809312.html
