Закрепленное меню Javascript - ошибка на консоли

Привет, у меня проблема с липким меню. Я пытаюсь заставить его работать. На консоли у меня есть информация: 1. Невозможно прочитать свойство offsetTop со значением NULL. в HTMLDocument. 2. Невозможно прочитать свойство classList со значением null. в myFunction (app.js: 86) в window.onscroll (app.js: 77) Что не так с этим кодом?

HTML код:

<header class = "nav_main">
            <div class = "about_nav">
                <p><a href = "#b1">Lilando</a></p>
            </div>
            <div class = "price_nav">
                <p><a href = "#b2">Cennik</a></p>
            </div>
            <div class = "lilando_nav">

            </div>
            <div class = "gallery_nav">
                <p><a href = "#b3">Gallery</a></p>
            </div>
            <div class = "contact_nav">
                <p><a href = "#b4">Kontakt</a></p>
            </div>
        </header>

CSS код

.sticky {
position: fixed;
top: 0;
width: 100%;
    }
.nav_main {
    display: flex;
    justify-content: space-around;
    text-transform: uppercase;
    overflow: hidden;}

Код java-скрипта:

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

    var navMain = document.querySelector("nav_main");
    var sticky = navMain.offsetTop;

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

Вы ищете querySelector(".nav_main").

— 04.11.2018 23:55

Ошибка говорит, в чем проблема («Невозможно прочитать свойство offsetTop для нулевой ..») - доверяйте ей и работайте в обратном направлении. например. Почему равно нулю x в x.offsetTop? То есть, «вопрос» здесь после начальной отладки должен быть «Почему document.querySelector (..) возвращает null?», И сам этот вопрос можно легко изучить в консоли ..

— 04.11.2018 23:58

javascript sticky

04.11.2018 23:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

я в порядке с Obsidian Age;)

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

    var navMain = document.querySelector(".nav_main");
    var sticky = navMain.offsetTop;

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

.sticky {
position: fixed;
top: 0;
width: 100%;
}
.nav_main {
    display: flex;
    justify-content: space-around;
    text-transform: uppercase;
    overflow: hidden;
}
body {
height: 1500px;
}

<header class = "nav_main">
    <div class = "about_nav">
        <p><a href = "#b1">Lilando</a></p>
    </div>
    <div class = "price_nav">
        <p><a href = "#b2">Cennik</a></p>
    </div>
    <div class = "lilando_nav">

    </div>
    <div class = "gallery_nav">
        <p><a href = "#b3">Gallery</a></p>
    </div>
    <div class = "contact_nav">
        <p><a href = "#b4">Kontakt</a></p>
    </div>
</header>

Оооооо! Спасибо! Какая глупая ошибка: / Спасибо за ответы.

— 05.11.2018 08:51

05.11.2018 00:06