2 Чего не хватает в моем javascript для исчезающей навигационной панели?

вопрос создан в Wed, May 8, 2019 12:00 AM

Я хочу избежать jQuery, чтобы лучше понять Javascript. На данный момент у меня настроен Codepen, который отображает большую часть моего первого проекта. Я знаю, что код, вероятно, небрежно, и я новичок. Я просто хочу, чтобы JS работал с полностью исчезающей навигационной панелью на Scroll, тогда я буду оптимизировать ее оттуда. Спасибо!

Я искал youtube, google, SO, но, похоже, все используют jQuery.

https://codepen.io/dev20tx/pen/wbKyJq

CSS:

.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
opacity: 0.8;
z-index: 2;
}

И Javascript:

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

function navFunction() {
  if (document.body.scrollTop > 50 || 
    document.documentElement.scrollTop > 50) {
    document.queryselector(".nav").className = "test";
  } else {
    document.queryselector(".nav").className = "";
  }
}

Исчезающая навигационная панель.

    
2
2 ответа                              2                         

Хорошо, так мало вещей.

Во-первых, queryselector должен быть querySelector (с большой буквы S). Также обратите внимание, что установка .nav для className на "test" или "" приведет к удалению класса "nav" из этого элемента.

Во-вторых, вы должны обязательно прикрепить событие onscroll после загрузки страницы.

Наконец, вы присоединяете событие onscroll к окну, но на самом деле вы хотите присоединить его к элементу .container, так как это элемент, который вы прокручиваете.

Я не просто бросаю все решение на твои колени, так как ты, кажется, хочешь немного поиграть с собой. Если вы хотите получить более подробный ответ, не стесняйтесь спрашивать.

    
1
2019-05-08 16: 41: 47Z
  1. Я не могу поверить, что я не использовал это. Спасибо, между вашим ответом и ответом ниже я понимаю свои ошибки.
    2019-05-08 16: 57: 32Z
источник размещен Вот