Код Javascript classlist.add работает только частично
Я изо всех сил пытался заставить меню Navbar «прилипать» при прокрутке страницы вниз. Я вставляю HTML-код навигации с помощью JS и включил код JS-прикрепления во вставленный файл, но он только прилипает и не отклеивается. То есть, когда я прокручиваю вниз, NAV прилипает к верхней части страницы, но когда я прокручиваю обратно вверх, он остается «застрявшим». Поэтому я переместил код «палки» так, чтобы он следовал за кодом «вставки» в HTML, и у меня возникла та же проблема. Это после использования методаinnerHTML для вставки «кода навигации» и получения ошибки «Переменная Navbar имеет значение null», несмотря на многочисленные манипуляции с кодом. Тестовый файл (с «родным» HTML – без вставленного HTML – и внутренний HTML JS работает нормально), так что это как-то связано со вставкой HTML (я думаю). Вот мой текущий код:
<div id = "fixed" class = "fixed-header">
<script src = "header.js"></script>
<script src = "header-scroll.js"></script>
</div>
«header.js» прост — он использует document.write() для вставки HTML (и HTML содержит атрибут id="MainNav"!). Вот JS прокрутки заголовка:
window.onscroll = function() { navStick() };
window.navStick = function() {
var navbar = document.getElementById('MainNav');
var sticky = navbar.offsetTop;
if (window.scrollY >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
Любая помощь будет принята с благодарностью, поскольку это сводит меня с ума!
Код отлично работает в HTML без «родного» навигационного кода (не вставленного), но падает, независимо от того, что я пробовал, когда навигационный код вставлен.
Несколько советов: document.write устарел, а позиция: липкий — встроенная функция современных браузеров.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
…То есть, когда я прокручиваю вниз, NAV остается в верхней части страницы, но когда я прокручиваю назад, он остается «застрявшим»…
Мне это немного непонятно… Итак, если вы прокрутите вверх, панель навигации останется на том месте, где вы меняете направление, или навигация останется (и не исчезнет) в исходном положении?
Попробуйте этот подход (просто настройте правильно display, когда мы имеем в виду первоначальный показ)
И, как упомянул @Ry-, избегайте document.write(), если не хотите проблем…
https://developer.mozilla.org/en-US/docs/Web/API/Document/write
https://developer.chrome.com/docs/lighthouse/best-practices/no-document-write
<nav id = "MainNav" class = "navbar">
<h1> sticky Navbar</h1>
</nav>
<div style = "padding:15px 0; height:1500px;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
</p>
</div>
//—-
.navbar {
width: 100%;
background: #333;
color: white;
padding: 10px 0;
text-align: center;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
display: none; /* hide (if you need by default) */
}
.navbar.visible {
display: block;
}
//—-
document.addEventListener("DOMContentLoaded", function() {
const navbar = document.getElementById('MainNav');
window.addEventListener('scroll', function() {
if (window.scrollY > 0) {
navbar.classList.add("visible");
} else {
navbar.classList.remove("visible");
}
});
});
https://codepen.io/Lucas_Mas/pen/pomLwLK
Огромное спасибо @Lucasz – это помогло. Я рвал на себе волосы, так что я у тебя в долгу! :)
@Paulepops Не волнуйся, здравствуй, приятель!
Просто добавьте
if (!navbar) { return; }к функции.