Навигация Исчезает в Chrome после прокрутки и нажатия

Я работаю над небольшим веб-сайтом для приложения для Android, которое я выпускаю, но у меня есть небольшая проблема, на которую я не могу найти ответ.

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

Веб-сайт www.ioudebtcalculator.com

Это единственные стили, которые я применил:

#navBar {
    background-color:#000;
    position:fixed;
    width:100%;
    font-family:sans-serif;
    font-weight:bold;
    font-size:13pt;
    height:70px;
}

Изменить: с тех пор я удалил позицию, зафиксированную с navBar на веб-сайте, чтобы вы больше не видели проблему. Проблема еще не решена.

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

Ответ 1

он работает для меня, добавляя это к вашему navbar css

-webkit-transform: translateZ(0);

делает его

#navBar {
    background-color: #000;
    width: 100%;
    position: fixed;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14pt;
    height: 70px;
    -webkit-transform: translateZ(0);
    z-index: 1;
    box-shadow: 0 2.5px 20px #000;
}

Ответ 2

Возможно, полезно использовать свиток:

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

$("#button").click(function() {
     $('html, body').animate({
         scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
 });

Ответ 3

Пожалуйста, замените свой css, используя приведенный ниже код

    nav {
        background: none repeat scroll 0 0 #000000;
        display: block;
        position: absolute;
        margin-left: 115px !important;
        float: left;
        height: 70px;
        margin-left: 10%;
        width: 40%;
    }

Ответ 4

Я понятия не имею, что происходит не так. Но я собираюсь выбрасывать свое лучшее предположение, так как никто еще не ответил.

Следующее выглядит как хороший кандидат на случайное поведение:

function switchTabs(e) {
    $('a#currentTab').removeAttr('id');
    $(e).children('a').attr('id','currentTab');
}

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

function switchTabs(e) {
    $('a.currentTab').removeClass('currentTab');
    $(e).children('a').addClass('currentTab');
}

Может, мне повезло?

Ответ 5

Вы должны добавить top: 0 к элементу. Это выровнят его в верхней части страницы независимо от того, что. Вам может потребоваться добавить отступы в верхнюю часть оболочки содержимого, чтобы она никогда не была покрыта навигацией.

Ответ 6

Я просто добавил две вещи как в Chrome, так и в Firefox, и он работал хорошо. Я нажал на ссылку и прокрутил немного, nav останется в ожидании.

For #navBar
position: fixed;

For #wrapper
padding-top: 70px;