Navbar исчезает после использования функции scrollIntoView() в мобильном представлении

Проблема: NavBar исчезает после scrollIntoView() использования на мобильном представлении.

Связанные JS

function scroll_to_chapters() {
    const chapters = document.getElementsByClassName("chapter_list")[0];
    if (nav.classList.contains("nav-active")) {
        navLinks.forEach((link) => {
            if (link.style.animation) {
                link.style.animation = '';
            }
        });
        enableScroll();
        burger.classList.toggle('toggle');
        nav.classList.toggle('nav-active');
    }
    chapters.scrollIntoView({ block: 'start',  behavior: 'smooth' })
}

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

Navbar HTML

<div class="fix">
    <header>
        <div class="container">
            <nav>
            <a href="/" data-attr="img"><img src="{% static 'img/northernlogo.png' %}" class="logo" alt="logo"></a>

                <ul class="nav-links">
                    <li><a href="/">Home</a></li>
                    <li><a href="/" onclick="scroll_to_chapters();return false;">Chapters</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/links">Links</a></li>
                </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
            </nav>
        </div>
    </header>
</div>

Фотография ошибки

Перед

Before

После

After

Как ответить взаимностью

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

PS: Пожалуйста, свяжитесь со мной, если вам нужна дополнительная информация.

Значит, вы используете тело в качестве overscroll, а также есть обертка с той же высотой (и она в основном такая же, как тело) со скрытым overscroll.

Ваше меню, которое вы позволяете прокручивать, имеет высоту 100%, поэтому нижняя часть находится на уровне nav:height + 100%. Я предполагаю, что при прокрутке в просмотр сначала прокручивается обертка (так как она переполняет nav:height), а затем прокручивается тело. В результате nav-bar исчезает, так как переполнение скрыто.

Вы можете исправить это, отрегулировав высоту меню, чтобы сделать его фактически 100% по высоте: например, CSS: calc(100% - 70px) или используя flex-box и позволяя меню flex:1.

Вам необходимо закрепить навигационную панель, используя свойство "position: fixed". Добавить & Изменить данный CSS

Вот результат

enter image description here

@media only screen and (max-width: 800px) {
    
    /*ADD This*/
    .fix {
        position: fixed;
        width: 100%;
        z-index: 1;
    }
    
    /*modify this*/
    .nav-links {
        height: 100vh;
    }
    .content {
        margin-top: 90px;
    }
}

Проблема в том, что ваш заголовок совсем не закреплен, вы можете изменить свой код, чтобы сделать его "липким".

'position: sticky;' не будет перекрывать содержимое вашего тела, как это делают 'position: fixed;'. Но вы можете использовать и его.

Скорректируйте код мобильного представления с помощью этого CSS, и он выполнит свою работу.

/* this part fill make your header be sticky */
.fix {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* this part needed to remove overlay */
.nav-links {
  display: none;
  height: unset;
}

.nav-links.nav-active {
  display: flex;
}

/* this part needed to make 'sticky' work */
.wrapper {
  overflow: visible;
}

  • Я не знаю, что не так с scrollIntoView, но я заметил, что когда я перемещаю части chapiters, чтобы они были прямым ребенком body, эта проблема исчезает.
  • Однако, есть способ сделать такое же поведение без какого-либо js кода:
  1. В коде CSS добавьте scroll-behavior: smooth; в корень.
  2. Добавьте id к chapiter: <div id="chap_id" class="chapter_list">
    3. .
  3. Превратите атрибут href ссылки chapiter в : page#id link : <a href="page_chapters#chap_id">

Вы можете найти документ по scroll-behavior здесь.

Это происходит потому, что .nav-links являются position: absolute с:

  • a position: static (по умолчанию) родитель .fix, и
  • a position: relative дедушка и бабушка .wrapper.

В этом случае scrollIntoView({block: 'start', ...}) прокручивает .fix из вида .wrapper перед тем, как прокрутить .wrapper себя.

  • {block: 'center', ...} делает то же самое.
  • {block: 'end', ...} и {block: 'nearest', ...} не делают.

Вы не можете прокрутить .fix обратно в просмотр, потому что .wrapper имеет overflow: hidden.

Решение

Заставьте .fix иметь position: relative и заставьте .nav-links иметь height: 100vh.

.fix {
  position: relative;
}
.nav-links {
  height: 100vh;
}

Запустите этот фрагмент кода, чтобы воспроизвести проблему, и нажмите на переключатель, чтобы попробовать с ответом:

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