面试题：CSS中position: sticky的复杂应用场景分析

Question

假设要实现一个页面，顶部有一个导航栏，在页面滚动到一定位置时，导航栏固定在顶部，但当滚动到页面底部特定区域时，导航栏又需要随着页面一起滚动消失。请描述如何使用position: sticky属性结合其他CSS属性来实现该功能，并说明可能会遇到的兼容性问题及解决方案。

Answer 1

使用 position: sticky 实现该功能的步骤

1. HTML 结构：

   <header class="navbar">导航栏内容</header>
   <main>
       <!-- 页面主要内容 -->
       <div class="bottom - specific - area">底部特定区域</div>
   </main>
   

2. CSS 样式：

.navbar { position: sticky; top: 0; /* 导航栏其他样式，如背景色、高度等 / background - color: #333; color: white; height: 50px; } .bottom - specific - area { height: 200px; / 底部特定区域其他样式 / } main { / 页面主要内容的样式 */ min - height: 100vh; }

这里 `position: sticky` 使导航栏在滚动到顶部时固定在顶部。`top: 0` 确定了固定的位置是顶部。

3. **解决滚动到页面底部特定区域时导航栏随页面滚动消失**：
可以使用 JavaScript 监听页面滚动事件，当滚动到接近底部特定区域时，移除导航栏的 `position: sticky` 属性。例如：
```javascript
const navbar = document.querySelector('.navbar');
const bottomArea = document.querySelector('.bottom - specific - area');
window.addEventListener('scroll', () => {
    const rect = bottomArea.getBoundingClientRect();
    if (rect.top <= window.innerHeight) {
        navbar.style.position = 'unset';
    } else {
        navbar.style.position ='sticky';
        navbar.style.top = '0';
    }
});

兼容性问题及解决方案

1. 兼容性问题：

   • position: sticky 在一些较旧的浏览器（如 Internet Explorer 全系列）中不支持。
   • 在部分移动浏览器（如 Android 4.4 及以下）也存在兼容性问题。

2. 解决方案：

   • 使用 polyfill：可以使用 stickyfill.js 这样的 polyfill 库。引入该库后，在 JavaScript 中调用 Stickyfill(); 即可为不支持 position: sticky 的浏览器模拟出类似效果。
   • 优雅降级：对于不支持的浏览器，可以采用 position: fixed 替代 position: sticky 并结合 JavaScript 模拟滚动效果，不过这种方式可能无法完全还原 position: sticky 的行为，但能保证基本功能可用。例如，在页面加载时检查浏览器是否支持 position: sticky，如果不支持则将导航栏的 position 设置为 fixed，并在滚动时调整其位置以模拟 sticky 效果。

   if (!('sticky' in document.documentElement.style)) {
       const navbar = document.querySelector('.navbar');
       navbar.style.position = 'fixed';
       navbar.style.top = '0';
       let lastScrollTop = 0;
       window.addEventListener('scroll', () => {
           const scrollTop = window.pageYOffset;
           if (scrollTop > lastScrollTop) {
               // 向下滚动
               if (scrollTop + window.innerHeight >= document.body.offsetHeight) {
                   // 接近底部
                   navbar.style.top = '100vh';
               } else {
                   navbar.style.top = '0';
               }
           } else {
               // 向上滚动
               navbar.style.top = '0';
           }
           lastScrollTop = scrollTop;
       });
   }