Angular 5无滚动条影响的粘性导航栏：复刻Angular Material导航栏遇问题

嘿，我刚好研究过Angular Material官网的粘性导航实现，来帮你梳理下常见的遗漏点和对应的修复位置：

• 未添加占位容器抵消文档流变化：Angular Material官网的粘性导航不会让页面内容“跳一下”，核心是用了一个和导航栏高度完全一致的占位容器。当导航栏切换为粘性状态（脱离文档流）时，这个占位容器留在原位置，保证页面整体高度不变，滚动条自然也不会受影响。很多人直接给导航栏加position: sticky或fixed，忽略了这个占位容器，导致页面布局移位。
• 忽略position: sticky的父容器约束：sticky元素的所有父容器不能设置overflow: hidden/auto，也不能有transform属性，否则粘性定位会直接失效。如果你的导航栏嵌套在某个带overflow样式的父组件里，那肯定出不来预期效果。
• 未做滚动事件节流优化：直接监听window.scroll会高频触发状态判断，不仅卡顿，还可能导致导航栏状态切换不流畅。Angular Material用了节流处理来限制事件触发频率，这也是容易遗漏的细节。
• 缺少状态切换的平滑过渡：官网导航栏在粘性/非粘性状态切换时有平滑的阴影和位置过渡，很多人只处理了定位逻辑，漏了CSS过渡样式，导致效果生硬。

1. 添加占位容器（模板层）
   在导航栏组件的外层加一个占位div，动态同步导航栏的高度：

   <!-- 占位容器 -->
   <div class="nav-placeholder" [style.height.px]="navbarHeight"></div>
   <!-- 你的导航栏组件 -->
   <app-navbar [class.is-sticky]="isNavbarSticky"></app-navbar>
   

2. 高度计算与节流滚动（组件类）
   通过ElementRef获取导航栏的初始高度和偏移量，并用RxJS节流处理滚动事件：

   import { Component, ElementRef, OnInit } from '@angular/core';
   import { fromEvent } from 'rxjs';
   import { throttleTime } from 'rxjs/operators';
   
   @Component({
     selector: 'app-layout',
     templateUrl: './layout.component.html',
     styleUrls: ['./layout.component.css']
   })
   export class LayoutComponent implements OnInit {
     navbarHeight: number;
     navbarOffsetTop: number;
     isNavbarSticky = false;
   
     constructor(private el: ElementRef) {}
   
     ngOnInit() {
       const navbarEl = this.el.nativeElement.querySelector('app-navbar');
       this.navbarHeight = navbarEl.offsetHeight;
       this.navbarOffsetTop = navbarEl.offsetTop;
   
       // 节流监听滚动事件
       fromEvent(window, 'scroll').pipe(throttleTime(15)).subscribe(() => {
         this.checkStickyState();
       });
     }
   
     checkStickyState() {
       this.isNavbarSticky = window.scrollY > this.navbarOffsetTop;
     }
   }
   

3. 修复父容器样式（样式层）
   检查导航栏所有父组件的CSS，移除或调整以下属性：

   /* 要避免的父容器样式 */
   .parent-container {
     /* overflow: hidden; */
     /* overflow: auto; */
     /* transform: translate(0); */
   }
   

   同时给导航栏添加粘性样式和平滑过渡：

   app-navbar {
     width: 100%;
     transition: all 0.3s ease-in-out;
   }
   
   app-navbar.is-sticky {
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
   

内容的提问来源于stack exchange，提问作者telepzk