原生JS实现的粘性导航栏迁移TypeScript适配Angular及null报错解决问询

TypeScript 中 document.getElementById() 的返回类型是 HTMLElement | null，如果 DOM 中不存在对应 ID 的元素就会返回 null，TS 会强制要求你处理空值场景，避免运行时出现未定义错误。

如果你只是要快速解决报错，临时兼容原有逻辑，可以加空值判断或者非空断言：

// 写法1：加空值判断，运行时更安全
const navbar = document.getElementById("menu-bottom");
if (!navbar) {
  console.warn('未找到id为menu-bottom的导航栏元素');
} else {
  const sticky = navbar.offsetTop;
  window.onscroll = () => {
    window.pageYOffset >= sticky ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
  };
}

// 写法2：非空断言，确认页面一定存在该元素时可以用
const navbar = document.getElementById("menu-bottom")!; // 末尾加!表示告知TS该值一定不为null
const sticky = navbar.offsetTop;
window.onscroll = () => {
  window.pageYOffset >= sticky ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
};

直接操作document、手动绑定window滚动事件在Angular里不符合最佳实践，容易出现内存泄漏、服务端渲染不兼容、元素冲突等问题，推荐用Angular内置API实现：

1. 首先在组件模板中给导航栏加模板引用变量，不需要用id：

<nav #menuBottom class="menu-bottom">导航栏内容</nav>

2. 组件类TS代码：

import { Component, ViewChild, ElementRef, AfterViewInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('menuBottom') menuBottom!: ElementRef<HTMLElement>;
  private stickyOffset!: number;

  // 视图渲染完成后再获取元素的偏移量
  ngAfterViewInit(): void {
    this.stickyOffset = this.menuBottom.nativeElement.offsetTop;
  }

  // 用HostListener监听滚动事件，组件销毁时会自动解绑，不会内存泄漏
  @HostListener('window:scroll')
  onScroll(): void {
    const navbar = this.menuBottom.nativeElement;
    window.pageYOffset >= this.stickyOffset ? navbar.classList.add('sticky') : navbar.classList.remove('sticky');
  }
}

如果只是基础的吸顶需求，不需要额外JS逻辑，直接用CSS的position: sticky即可实现，性能远优于JS监听滚动：

.menu-bottom {
  position: sticky;
  top: 0; /* 调整为你需要的吸顶触发位置 */
  z-index: 999; /* 确保导航在其他元素上层显示 */
}

内容的提问来源于stack exchange，提问作者Luciano Sanchez Balbuena