嗨，我必须通过粘性导航栏将一些代码从 javascript 传递到打字稿

Question

这是我最初在 javascript 中创建的导航栏（在一个单独的文件夹中，其中包含纯 html、css 和确实有效的 js），但我想将其更改为与 angular.

一起使用的打字稿

window.onscroll = function() {myFunction()};

let navbar = document.getElementById("menu-bottom");
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

或者发生的事情是，当我将它传递给打字稿时，它在 navbar 中标记了一个错误，因为它说它是空的（我猜是因为 getElementById）但我不知道不知道如何更改它以使其工作。

Answer 1

该错误表示 navbar 可能为空，您应该在使用它之前检查一个值，这样它会抛出一个错误，即“无法读取属性 'offsetTop' 未定义'.

let navbar = document.getElementById("menu-bottom");
if (navbar) {
  let sticky = navbar.offsetTop;
}

Answer 2

TL;DR

window.onscroll = function() {myFunction()};

let navbar = document.getElementById("menu-bottom");

// Check if the 'navbar' is not null
if (!navbar) throw new Error("#menu-bottom should be defined")

let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

详情

你可以用the return value of getElementById() definition in MDN docs看看。它说：

An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

因此，当“#menu-bottom”未出现在 DOM 树中时，它返回 null。如果你真的确定它永远不应该是null，那么最好写一个这样的断言：

if (!navbar) throw new Error("#menu-bottom should be defined")

最好在DOM内容加载完成后再加载脚本：

document.addEventListener("DOMContentLoaded", () => { /* your code goes here */ });

嗨，我必须通过粘性导航栏将一些代码从 javascript 传递到打字稿

Hi, I have to pass some code over a sticky navbar from javascript to typescript

javascript

typescript

navbar

sticky

TL;DR

详情