Bootstrap 3 Correction de la barre de navigation «Flickering» sur le défilement mobile à l'aide de l'effet de défilement d'une page jQuery

merci pour le contrôle de cette question.

Je me demandais si il existe un moyen pour empêcher un Bootstrap 3 fixe en haut de la barre de navigation de "scintillement" ou de sauter vers le haut et vers le bas lorsque l'auto-défilement à l'aide d'un plugin jQuery.

Un exemple actif est ici:

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

Si vous regardez ce modèle sur un téléphone mobile (je suis en utilisant un iPhone 4) utiliser la barre de menu et cliquez sur un lien. Le plugin jQuery qui vous emmène à la section de la page, mais regardez la barre de menu du haut. Il scintille et danse tout autour comme un fou, et n'a pas vraiment de rester sur place.

Voici le code associé à cet exemple, mais la plupart des autres exemples que j'ai vu des gens qui faisaient la même chose de différentes façons avec Bootstrap supérieure fixe nav ont été les mêmes.

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:

Combinaison de la valeur par défaut de Bootstrap CSS 3 et suivants des styles personnalisés:

.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;
}

Encore une fois, le meilleur moyen de reproduire le problème est de le tester cet exemple de site à l'aide d'un appareil mobile:

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

Lorsqu'il est testé sur un PC, le problème ne se produit pas.

Merci pour la lecture! Si vous avez déjà trouvé un correctif pour ce problème, je serais ravi de l'entendre, ou si vous êtes prêt à prendre une fissure à ce il serait bien apprécié!

source d'informationauteur IronSummitMedia | 2014-02-03

  2. 2

    J'avais aussi 1px saut problème avec bootstrap navbar.

    Résolu par l'ajout de ce parent de l'élément (dans mon cas <header>)

      -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: fixed;
  z-index: 1000;
  3. 0

    Réglage en hauteur et en largeur sur le logo img arrêté le scintillement. Cela pourrait ne pas fonctionner pour chaque situation, mais il ne s'arrête l'jumpy animation.

    Je suis en utilisant Headroom.js avec Bootstrap. Le logo change également d'un plus grand format carré en haut de la page à un plus petit, à l'horizontale, lorsque vous faites défiler vers le bas. La modification de la hauteur de l'attribut avec le Javascript après la page s'affiche commence le scintillement de nouveau sur les navigateurs Webkit.

  4. 0

    J'ai eu le scintillement de la barre de navigation de l'effondrement de la classe j'ai donc ajouté min-height:

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