Как мне создать липкую панель навигации?

Question

Я пытаюсь заставить мою панель навигации придерживаться верхней части страницы при прокрутке страницы вниз.Я включил скрипку JS: https://jsfiddle.net/1qsy0Lwu/ Я точно следовал примеру w3schools, и он не работает.Пожалуйста помоги.

В своем исследовании я заметил разницу между offsetTop и offset (). Top.У меня есть ощущение, что проблема связана с чем-то в моем CSS.

Я также заметил, что ссылки в навигационной панели не работают, когда в javascript применяется offsetTop.Хотя в консоли не отображаются ошибки.Однако при реализации offset (). Top в консоли появляется сообщение об ошибке ... но ссылки навигационной панели работают

HTML

<div id="navbar">
    <a class="active" href="#">Apps</a> 
    <a href="#">TAB 1 </a> 
    <a href="#">TAB 2</a>
    <a href="#">TAB 3</a>
    <a href="#">TAB 4</a>
</div>

<div class="container">
CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT 
</div>

CSS

#navbar {
overflow: hidden;
background-color: #161717;
margin-top: 0.1%;
text-align: center;
}

#navbar a {
display: inline-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: #1e272d;
color: white;
 }

.container {
padding: 16px;
}

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

.sticky + .container {
padding-top: 1000px;
}

JS

$(document).ready(function () {

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");
 }
}

});

Answer 1

Вы можете использовать чистый CSS с позицией : sticky .Чтобы определить, как далеко от вершины значение становится постоянным, измените свойство top.

nav {
  position: sticky;
  top: 0;
}

Пример 1

body {
  padding: 0;
  margin: 0;
}

nav {
  position: sticky;
  top: 0;
}

nav>ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: red
}

nav>ul>li {
  padding: 10px;
}

<nav>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</nav>
<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Пример 2

body {
  padding: 0;
  margin: 0;
}

nav {
  margin-top: 80vh;
  position: sticky;
  top: 0;
}

nav>ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: red
}

nav>ul>li {
  padding: 10px;
}

<nav>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</nav>
<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Answer 2

Вы пропустили включение jquery, и CSS немного отключен.

См. Рабочий пример здесь: https://jsfiddle.net/d4xLjuth/1/

Я включил jquery и обновил следующее до css:

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color:red !important;
}

.sticky + .container {
    padding-top: 10px;
}