Проблема CSS/JS: Серое пространство появляется между панелью навигации и содержимым при загрузке страницы, а затем исчезает при взаимодействии

Я работаю над сайтом на основе Django и столкнулся с проблемой появления серого пространства между фиксированной навигационной панелью и контентом на главной странице. Серое пространство появляется только при первоначальной загрузке страницы, а когда я взаимодействую со страницей (например, прокручиваю ее), серое пространство исчезает, и макет исправляется сам собой.

Вот что происходит:

  • При первоначальной загрузке: Между навигационной панелью и содержимым появляется серое пространство.
  • После любого небольшого взаимодействия: Серое пространство исчезает, и макет страницы ведет себя так, как ожидалось.

Initial Load After some activity

Что я пробовал: Я отследил проблему до этого JavaScript, который регулирует границы контента в зависимости от высоты навигационной панели:

document.addEventListener("DOMContentLoaded", function () {
    var navbar = document.getElementById("navbar");
    var content = document.querySelector(".content");

    function adjustContentMargin() {
        var navbarHeight = navbar.offsetHeight;
        content.style.marginTop = navbarHeight + "px";
    }

    // Adjust margin on page load
    window.onload = function() {
        adjustContentMargin();
    };

    // Re-adjust on window resize
    window.addEventListener('resize', function () {
        adjustContentMargin();
    });
});

Проблема:

  • Когда JS активен, страница изначально загружается с серым пространством между навигационной панелью и содержимым. Применяется margin-top, но похоже, что это происходит после появления серого пространства.
  • Если я удалю JS, страница изначально загружается без серого пространства, но когда я взаимодействую с ним, содержимое смещается за навигационную панель.

Что мне нужно:

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

  • Обеспечивает правильное позиционирование содержимого под навигационной панелью при первоначальной загрузке.
  • Динамически регулировать границы контента в зависимости от высоты навигационной панели при изменении размера окна.

Похоже, что ваш adjustContentMargin применяет разные margin-top к вашему элементу содержимого.

Возможное быстрое решение: Вы упомянули, что это происходит только в событии pageLoad, поэтому попробуйте удалить:

   // Adjust margin on page load
window.onload = function() {
    adjustContentMargin();
};

В результате должен получиться описанный вами счастливый поток, при загрузке страницы нет серого пространства, но после взаимодействия с пользователем (прокрутка?) произойдет настройка.

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

попробуйте добавить "призрачный" элемент, который будет занимать место на панели навигации (в основном по высоте, я думаю). Этот элемент может быть родственником фиксированного элемента navbar. (позволяя ему занять необходимое пространство, которое мы сейчас используем margin, чтобы компенсировать разрыв с.

)

поэтому html должен выглядеть примерно так:

...
...
<div id="ghost-navbar" style="it should have the same dimensions as the navbar">...</div>
<div id="your-navbar" class="fixed-styled-element">...</div>
...
<div class="content"></div>
...
..

Я считаю, что это поможет вам достичь желаемого. И вам не понадобится JS, чтобы изменить макет страницы, вызывая ненужное смещение макета, потому что:

  1. Навбар теперь всегда фиксирован
  2. Элемент содержимого всегда будет начинаться после "призрака", создавая ощущение, что навигационная панель будет фиксированной, когда пользователь прокручивает страницу, а когда пользователь находится в верхней части страницы, фиксированная навигационная панель прекрасно вписывается в позицию элемента "призрака".

P.S. убедитесь, что элемент-призрак имеет самый низкий уровень z-index, если это как-то изменено в вашем коде.

Надеюсь, это поможет вам. Будьте здоровы.

Вернуться на верх