理解需求：悬浮元素随页面滚动显示/隐藏
您所描述的技术是一种悬浮元素的行为，当页面内容滚动到特定位置时，该元素会显示或隐藏。您提到了头条和腾讯网站上的示例，但其实这项技术可以应用于任何网站。
实现原理：intersection observer api
为了实现这一效果，可以使用 intersection observer api。该 api 允许您监听元素是否出现在视口中，并相应地执行某些操作。
在这个具体情况下，我们想监听页面底部的元素是否出现在视口中。如果它出现在视口中，则将左侧的悬浮元素隐藏；否则就显示。
步骤：
-
获取元素引用：
- 获取页面底部元素的引用，如 const endel = document.queryselector('.end');
- 获取左侧悬浮元素的引用，如 const leftel = document.queryselector('.left');
-
创建 intersection observer 实例：
- 创建一个 intersection observer 实例，并定义一个回调函数，该回调函数将在被监听元素进入或离开视口时调用。
- 在回调函数中，根据被监听元素是否出现在视口中，设置左侧悬浮元素的 display 属性为 none 或空字符串。
-
观测页面底部元素：
- 使用 observe() 方法将 intersection observer 实例附加到页面底部元素。
代码示例：
const endEl = document.querySelector('.end');
const leftEl = document.querySelector('.left');
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);通过使用 intersection observer api，您可以实现无需知道元素高度的悬浮元素显示/隐藏效果，从而让您的网站具有更具交互性和视觉吸引力的用户体验。
