Исправлено перемещение элементов с помощью верхней панели навигации на мобильном устройстве.

Question

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

Перед прокруткой вниз:

После прокрутки вниз:

Отрывок моего SCSS, относящийся к навигационной панели:

nav {
    display: flex;
    flex-direction: column;
    float: left;
    background-color: #3a3e4b;
    height: 100%;
    width: 100px;
    position: fixed;
}

// body also switches flex direction to put the nav bar at the bottom.
@media only screen and (max-width: 720px) {
    nav {
        flex-direction: row;
        height: 70px;
        width: 100%;
    }
}

Полный SCSS доступен здесь: https://github.com/CorruptComputer/CorruptComputer.GitHub.io/blob/master/assets/css/main.scss

Я просмотрел их, но ни одна из них, похоже, не помогла:

• Ошибка при изменении размера верхней панели навигации на мобильном телефоне
• Как создать липкую панель навигации, которая после прокрутки фиксируется наверху

Answer 1

Это проблема, связанная с Google Chrome, для которой вам нужно найти обходной путь.

Когда появляется верхняя адресная строка мобильного Chrome, она перемещает страницу вниз, и из-за этого вы получаете этовопрос. При прокрутке страницы верхняя адресная строка исчезнет.

Попробуйте этот код Javascript, вы можете использовать его как функцию или просто как одну строку поверх вашего файла Javascript.

scrollOnLoad();

function scrollOnLoad() {
   window.scrollBy(0, 1);
}

или

  window.scrollBy(0, 1);