Мой липкий заголовок не работает, почему это? - PullRequest
Новая
       7

Мой липкий заголовок не работает, почему это?

0 голосов
/ 03 ноября 2019

Для школьного проекта мне нужно создать сайт. Одна из необходимых вещей - заголовок и, предпочтительно, липкий. Я пошел в w3schools и нашел для него учебное пособие, и я поместил его в свой проект, но заголовок определенно не прилипает. После часа поисков я сдался. Может, кто-нибудь из вас поможет мне? (Я только начинающий школьник по информатике, мой код не так уж и хорош)

Я пытался изменить идентификаторы и классы кода, который у меня уже был. И я пытался искать ошибки, но безуспешно.

HTML 

<header class="header" id="myHeader">
  <h1>My Page</h1>
</header>

CSS 

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

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

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

.sticky + .content {
  padding-top: 102px;
}

#openNav{
    text-align: left
}

Javascript 

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

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

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

Итак, заголовок существует и выглядит как заголовок, единственное, что есть;оно совсем не прилипает.

Ответы [ 2 ]

0 голосов
/ 03 ноября 2019

как упоминалось @blex, предоставленный код, кажется, работает. В любом случае, я просто хотел отметить, что вы также можете сделать липкий заголовок без какого-либо javascript, просто с помощью свойства css position: fixed. 

.header {
  position: fixed;
  top: 0px;
  height: 40px;
}

, вот полностью функциональный пример codepen .

0 голосов
/ 03 ноября 2019

Решил сам:))

Случайно поместил тег скрипта в <head> вместо <body>

...