Прикосновение Navbar при достижении позиции прокрутки 0 не работает - PullRequest
Новая
       5

Прикосновение Navbar при достижении позиции прокрутки 0 не работает

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

Я прочитал и попробовал несколько примеров создания ручки навигации при прокрутке, но безуспешно.Я использую последний шаблон начальной загрузки и ссылки cdn, а также установил ссылку на файл js.Код примера был взят из w3school.Я не нашел ничего плохого в коде.Пожалуйста, оставьте несколько предложений.Вот мои HTML, CSS и JS соответственно. 

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

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
} 
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
} 
<div class="header">
  <h2>Open Schooling</h2>
  <p>Open Schooling is a necessaity.</p>
</div>

<div id="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
</div>

<div class="content">
  <h3>Open Schooling</h3>
  <p>Many students are<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    Some text
  </p>
</div>

1 Ответ

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

В этом случае проблема заключается в положении тега <script> внутри HTML-кода.Проблема была решена после того, как тег <script> был перемещен в самый конец документа, прямо перед закрывающим тегом </body>.

Почему это решает проблему?

Код JavaScript выполняется прямо в той самой позиции, где он вставляется через тег <script>.Это означает, что ему придется работать с точными обстоятельствами и состояниями, которые известны в то время.В этом случае тег <script> был вставлен до того, как <div id="navbar"> был вставлен в код.С точки зрения JS, этот элемент #navbar не существует и, следовательно, document.getElementById("navbar") не даст ожидаемого результата.

Когда вы перемещаете тег <script> в конец кода HTML или, по крайней мере, после тега <div id="navbar">, этот элемент #navbar известен JavaScript во время выполнения, и код будетработа.

Вы можете идентифицировать эту проблему с помощью консоли JavaScript, встроенной в каждый современный браузер (рабочий стол).В этом случае сообщение об ошибке было

Невозможно прочитать свойство 'offsetTop' со значением NULL

null, в данном случае это был результат запроса document.getElementById("navbar").Если вы уверены, что не ошиблись в аргументе (navbar) [Я уверяю себя в этом, копируя и вставляя эти имена под сомнение], то это означает, что вы должны работать на позиции вашего <script>теги.

Приложение

Если вы не можете изменить положение тега <script> по какой-либо причине, вы можете попытаться отложить выполнение кода, заключив код в функцию и выполнитьэта функция после загрузки страницы.«Загрузка» может иметь различные значения:

  1. HTML полностью загружен, и DOM готов и готов к обработке.
  2. Загружается любой внешний контент, такой как изображения, таблицы стилей и сценарии.

В случае # 1 есть событие с именем DOMContentLoaded, на которое можно реагировать, а в случае # 2 событие называется load

См. Здесь DOMContentLoaded и здесь для нагрузки .

...