it-swarm.com.ru

Bootstrap 3: исправлено мерцание верхней навигационной панели при мобильной прокрутке с использованием одностраничного эффекта прокрутки jQuery

спасибо за проверку этой проблемы.

Мне было интересно, есть ли способ предотвратить «мерцание» или перепрыгивание панели навигации с фиксированной верхней панелью Bootstrap 3 при автоматической прокрутке с помощью плагина jQuery.

Активный пример здесь: 

http://startbootstrap.com/templates/grayscale/ 

Если вы посмотрите на этот шаблон на мобильном телефоне (я использую iPhone 4), используйте строку меню и нажмите на ссылку. Плагин jQuery переносит вас в раздел страницы, но следите за верхней панелью меню. Он мерцает и танцует вокруг, как сумасшедший, и на самом деле не остается на месте.

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

HTML:

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#page-top">
                <i class="fa fa-play-circle"></i>  <span class="light">Start</span> Bootstrap
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#about">About</a>
                </li>
                <li class="page-scroll">
                    <a href="#download">Download</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

...

jQuery:

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

CSS:

Сочетание стандартного Bootstrap 3 CSS и следующих пользовательских стилей:

.navbar {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #000;
}

.navbar-brand {
    font-weight: 700;
}

.navbar-brand:focus {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}

Опять же, лучший способ повторить проблему - протестировать этот образец сайта с помощью мобильного устройства:

http://startbootstrap.com/templates/grayscale/

При тестировании на ПК проблема не возникает.

Спасибо за прочтение! Если вы уже нашли решение этой проблемы, я хотел бы услышать об этом, или если вы готовы решить эту проблему, это будет оценено!

11
IronSummitMedia
49
Mo.

У меня также была проблема скачка в 1px с загрузчиком navbar.

Решается добавлением этого в родительский элемент (в моем случае <header>)

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: fixed;
  z-index: 1000;
4
xadamb

У меня была похожая проблема в Internet Explorer, когда загрузочная навигационная панель конфликтовала с плагином слайд-шоу (flexslider) на странице. Чтобы исправить это, установите z-index панели навигации на большое число.

<ul id="sidebar" class="nav nav-stacked fixed" style="z-index: 100;">
0
gynetik

Установка высоты и ширины на логотипе img остановила мерцание. Это может не сработать для каждой ситуации, но остановит нервную анимацию.

Я использую Headroom.js с Bootstrap. При прокрутке вниз логотип также изменяется с большего квадратного формата в верхней части страницы на меньшую горизонтальную ориентацию. Изменение атрибута высоты с помощью Javascript после рендеринга страницы снова начинает мерцать в браузерах Webkit.

0
Dylan Valade

У меня было мерцание из класса коллапса navbar, поэтому я добавил к нему минимальную высоту:

<div class="navbar-collapse collapse" style="min-height:50px; margin:auto;">
0
TacoEater