Заклеенное меню Javascript - ошибка на консоли - PullRequest
Новая
       7

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

0 голосов
/ 05 ноября 2018

Привет, у меня проблема с Sticky-меню. Я пытаюсь заставить это работать. На консоли у меня есть информация: 1. Не удается прочитать свойство 'offsetTop' из null на HTMLDocument. 2. Невозможно прочитать свойство 'classList' из null в myFunction (app.js: 86) at 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");
        }
    }

1 Ответ

0 голосов
/ 05 ноября 2018

Я в порядке с Обсидиановым возрастом;) 

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>
...