Прыжки с навигационной панелью

Question

Моя проблема довольно сложна (по крайней мере, трудно объяснить).

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

На рабочем столе (48em <) можно просто прокрутить панель навигации (поэтому она просто исчезает при прокрутке вниз), но при прокрутке назад вверх, он получает «липкий» класс(спасибо JS) и отображается сверху. </p>

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

Моя проблема связана с мобильным представлением. Мне пришлось добавить фрагмент кода CSS, чтобы содержимое страницы не мерцало (прыгало) при прокрутке вниз. (Мне нужно только, когда класс прикрепления добавлен JS.)

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

Что прекрасно работает, когда меню гамбургеров ЗАКРЫТО.

Когда меню открыто, высота панели навигацииизменения, и это требует больше отступа сверху, чтобы не сделать скачок содержимого страницы. Смотрите GIF ниже. 101

Если я изменю это заполнение на 248px, то содержимое не перескочит при открытии меню, но переместится при закрытии. 10

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

Полагаю, мне следует написать фрагмент кода JS, который будет делать это:

• Если флажок nav установлен, тогда измените .sticky + .content {padding-top: 248px;}

• Если он не отмечен, измените его на .sticky + .content {padding-top: 58px;}

• Все это только ниже 48em. На рабочем столе предполагается, что отступ равен 0.

Вот скрипка с кодом: https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/

Я не знаю много о JS, поэтому любая помощь будетбыть оцененным.

Answer 1

Проблема не в padding-top .. На самом деле вы не должны манипулировать вашим sticky классом. CSS position: sticky выполняет всю работу автоматически. Вы должны исправить 3 вещи:

1. Вам не нужно переключать .sticky класс на свитке. Вы должны удалить этот код:

// You don't need this all
if (window.pageYOffset > sticky) {
  header.classList.add("sticky");
} else {
  header.classList.remove("sticky");
}

Вы постоянно добавляете класс sticky к header

<header class="header sticky" id="navbar">

Вы удалите

@media (max-width: 767px) {
  .sticky {
  /* position: fixed; You don't need this */
  }
}

Проверьте эту скрипку: https://jsfiddle.net/tyminko/coetd4jx/1/

Answer 2

Современный ответ на вашу проблему состоит в позиционировании подменю с абсолютным значением.

.big-wrapper-main {
    position: relative;
}

.menu {
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    z-index: 5;
    background-color: white;
}

Подменю, расположенное таким образом, не меняет высоту родительского элемента, расположено после него (из-за top: 100%- 100% означает 100% высоты родителя).

Проблема в том, что вы используете float и clear, а мы пока не делаем это в веб-разработке и высотеваш .big-wrapper-main равен 0px, поэтому вы должны добавить положение относительно #navbar (когда оно не зафиксировано).

Мне пришлось добавить .header.sticky, чтобы перезаписать положение относительно.

.header.sticky {
    position: fixed;
}