У меня проблема, когда я получаю ошибку uncaught type, но скрипт все еще работает. Я хотел бы разрешить это, но, похоже, не вижу проблемы. Любая помощь очень ценится! Скрипт ниже.
StickyNav: function() {
let mainNavLinks = document.querySelectorAll(".js-pdp-link");
let mainSections = document.querySelectorAll("section");
let lastId;
let cur = [];
window.addEventListener("scroll", event => {
let fromTop = window.scrollY + 70;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
link.classList.add("js-active");
} else {
link.classList.remove("js-active");
}
});
});
}
Когда вы выполните:
let mainNavLinks = document.querySelectorAll(".js-pdp-link");
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
Вы выполняете итерацию всех элементов классом .js-pdp-link
и, если они реализуют интерфейс HTMLHyperlinkElementUtils (т. Е. Элемент a
или area
), извлекают их свойство hash. Затем вы используете hash
в качестве селектора.
Он может потерпеть неудачу тремя различными способами:
Если целевой элемент не реализует HTMLHyperlinkElementUtils
, link.hash
возвращает undefined
.
Если атрибут href
не содержит хеша, link.hash
возвращает пустую строку.
Если нет элемента с id
равным этому hash
, querySelector(link.hash)
имеет значение null
.
Случай 2 приводит к SyntaxError: '' is not a valid selector
при попытке document.querySelector(link.hash)
.
Остальные два позволяют запускать querySelector
но в результате этот section
имеет значение null
. Затем, если вы попытаетесь получить доступ .offsetTop
свойству .offsetTop
, вы получите TypeError: section is null
.
section
не определен. Отладка, чтобы выяснить, почему она не определенаhash
, у которого нет связанного раздела. Проверьте значения, чтобы убедиться, что они соответствуют вашим ожиданиям, и дважды проверьте, что вы не делали опечаток или чего-либо еще.