webentwicklung-frage-antwort-db.com.de

Bootstrap 3 Feste oberste Navbar 'Flickering' beim mobilen Scrollen mit dem jQuery One-Page-Scrolling-Effekt

vielen Dank, dass Sie sich diese Ausgabe angesehen haben.

Ich habe mich gefragt, ob es eine Möglichkeit gibt, zu verhindern, dass eine fixierte obere Navigationsleiste von Bootstrap 3 "flackert" oder beim automatischen Bildlauf mit einem jQuery-Plugin auf und ab hüpft.

Ein aktives Beispiel ist hier: 

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

Wenn Sie diese Vorlage auf einem Mobiltelefon anzeigen (ich verwende ein iPhone 4), verwenden Sie die Menüleiste und klicken Sie auf einen Link. Das jQuery-Plugin führt Sie zum Abschnitt der Seite, aber beobachten Sie die obere Menüleiste. Es flackert und tanzt wie verrückt und bleibt nicht wirklich stehen.

Hier ist der Code, der mit diesem Beispiel verknüpft ist, aber die meisten anderen Beispiele, die ich gesehen habe, dass Leute auf gleiche Weise mit feststehenden Bootstrap-Navis das gleiche tun, waren dieselben.

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:

Kombination aus dem standardmäßigen Bootstrap 3-CSS und den folgenden benutzerdefinierten Stilen:

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

Wiederholen Sie das Problem am besten, indem Sie diese Beispielsite mit einem mobilen Gerät testen:

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

Bei einem Test auf einem PC tritt das Problem nicht auf.

Danke fürs Lesen! Wenn Sie bereits eine Lösung für dieses Problem gefunden haben, würde ich es gerne hören, oder wenn Sie bereit sind, dieses Problem zu lösen, würden wir uns sehr freuen!

11
IronSummitMedia
49
Mo.

Ich hatte auch ein 1px-Sprungproblem mit der Bootstrap-Navbar.

Gelöst durch Hinzufügen dieses Elements zum übergeordneten Element (in meinem Fall <header>)

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

Ich hatte ein ähnliches Problem in Internet Explorer, bei dem die Bootstrap-Navbar mit einem Slideshow-Plugin (Flexslider) auf der Seite kollidierte. Um dies zu beheben, setzen Sie den Z-Index der Navigationsleiste auf eine große Zahl.

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

Durch Einstellen einer Höhe und Breite des Logos img wurde das Flimmern gestoppt. Dies funktioniert möglicherweise nicht für jede Situation, aber die sprunghafte Animation wurde gestoppt.

Ich benutze Headroom.js mit Bootstrap. Das Logo ändert sich auch von einem größeren quadratischen Format oben auf der Seite in eine kleinere horizontale Ausrichtung, wenn Sie nach unten scrollen. Wenn Sie das Höhenattribut mit Javascript ändern, nachdem die Seite wiedergegeben wurde, wird das Flimmern in Webkit-Browsern erneut gestartet.

0
Dylan Valade

Ich hatte in der Navbar-Collapse-Klasse ein Flackern und fügte die Mindesthöhe hinzu:

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