web-dev-qa-db-fra.com

Bootstrap 3 'Barre de navigation supérieure fixe' scintillement 'sur le défilement mobile à l'aide de l'effet de défilement d'une page jQuery

merci de vérifier ce problème.

Je me demandais s’il existait un moyen d’empêcher une barre de navigation supérieure fixe Bootstrap 3 de «scintiller» ou de sauter de haut en bas lors du défilement automatique à 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 portable (j'utilise un iPhone 4), utilisez la barre de menus et cliquez sur un lien. Le plugin jQuery vous amène à la section de la page, mais regardez la barre de menu supérieure. Il scintille et danse tout autour comme un fou, et ne reste pas vraiment en place.

Voici le code associé à cet exemple, mais la plupart des autres exemples de personnes faisant la même chose de différentes manières avec Bootstrap Fixed Nav's sont 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 du CSS par défaut Bootstrap 3 et des styles personnalisés suivants:

.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 consiste à tester ce site exemple à 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 d'avoir lu! Si vous avez déjà trouvé une solution à ce problème, j'aimerais bien l'entendre, ou si vous êtes prêt à tenter votre chance, ce serait très apprécié!

javascriptjqueryhtmlcsstwitter-bootstrap
11
IronSummitMedia

Essaye ça

{
  -webkit-backface-visibility: hidden;
}

Référence: https://developer.Apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//Apple_ref/doc/ -SW40

49
Mo.

J'ai également eu un problème de saut 1px avec bootbar navbar.

Résolu en ajoutant ceci à l'élément parent (dans mon cas, <header>)

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

J'ai eu un problème similaire sur Internet Explorer où la barre de navigation bootstrap serait en conflit avec un plugin de diaporama (flexslider) sur la page. Pour résoudre ce problème, définissez l'index z de la barre de navigation sur un grand nombre.

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

Définir une hauteur et une largeur sur le logo img a arrêté le scintillement. Cela pourrait ne pas fonctionner pour toutes les situations mais cela a arrêté l'animation instable.

J'utilise Headroom.js avec Bootstrap. Le logo passe également d'un format carré plus grand en haut de la page à une orientation plus petite et horizontale lorsque vous faites défiler l'écran. La modification de l'attribut height avec Javascript après le rendu de la page déclenche à nouveau le scintillement des navigateurs Webkit.

0
Dylan Valade

J'avais des scintillements dans la classe d'effondrement de la barre de navigation, alors j'ai ajouté min-height

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