Есть ли способ исправить неправильную прокрутку и добавить плавную анимацию на панель навигации? ⇐ Html

[Anonymous]

window.addEventListener("scroll", function (){ var header = document.querySelector("header"); header.classList.toggle("прокручивается", window.scrollY > 0); }) @import url('https://fonts.googleapis.com/css2?famil ... s:wght@100; 200&display=обмен'); * { маржа: 0; заполнение: 0; размер коробки: граница-коробка; семейство шрифтов: «Open Sans», без засечек; семейство шрифтов: «Поппинс», без засечек; } html { поведение прокрутки: плавное; } тело { дисплей: гибкий; гибкое направление: столбец; цвет фона: #6076AB; } /* #заголовок региона */ заголовок { ширина: 100%; позиция: абсолютная; верх: 0; слева: 0; переход: 1с; } header.scrolled { /* прокручиваем заголовок */ маржа: 0 авто; положение: липкое; ширина: подходящее содержимое; верх: 10 пикселей; } заголовок навигации { дисплей: гибкий; оправдание-содержание: пространство вокруг; отступ: 40 пикселей 100 пикселей; цвет: #000; цвет фона: #EBE4C1; } header.scrolled nav { /* прокрутка для навигации */ отступ: 10 пикселей 10 пикселей; радиус границы: 20 пикселей; } заголовок nav ul { дисплей: гибкий; гибкое направление: строка; оправдание-содержание: пространство между; стиль списка: нет; } заголовок nav ul li { отступ: 5 пикселей; поле: 0 10 пикселей; ширина: подходящее содержимое; преобразование текста: верхний регистр; переход: 0,7 с; } заголовок nav ul li a { текстовое оформление: нет; цвет: #000; } заголовок nav ul li:hover { цвет фона: #87CCC5; курсор: указатель; радиус границы: 10 пикселей; } /* заголовок #endregion */ раздел { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; высота: 100вх; ширина: 100%; } раздел: nth-child(even) { цвет фона: #87CCC5; [*]раздел 2 [*]раздел 3 [*]раздел 4 [*]раздел 5 [*]раздел 6 раздел 1

раздел 2

раздел 3

раздел 4

раздел 5

раздел 6

Во-первых, я самоучка, так что не судите меня, пожалуйста. Меня никто не учил программировать, я только научился сам, поэтому буду рад любым конструктивным советам!

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

Вторая «проблема» заключается в том, что я хотел бы добавить плавную анимацию на панель навигации. На данный момент не существует перехода, который сделал бы его лучше!

Спасибо!

Я пытался изменить позиции между «абсолютным», «фиксированным»… и индексами z в файле CSS, но это не сработало.