Set Bootstrap navbar Transparenz auf Blättern

Ich die Verwendung eines sekundären fille benutzerdefinierte aufgerufen.css überschreiben der bootstrap-code und ich würde gerne wissen, wie man erstellen Sie einen code, der die Aktivierung nur, wenn der Besucher meiner Website nicht ganz oben auf der Seite.

Ich bis jetzt erstellt eine transparente navbar mit den Standard-code von bootstrap. Das einzige, was ich tun müssen, ist, um es auszuführen: background-color: #color wenn der Besucher nach unten scrollen.

Beispiel: https://www.lyft.com/

Als ich in den oberen Rand der Seite, die Navigationsleiste ist transparent, aber wenn ich nach unten scrollen, es wird undurchsichtig.

Willkommen ALSO! :) Was haben Sie bisher ausprobiert? Können Sie post-Codes? Lyft nutzt javascript, um zu erreichen, dass die Wirkung glaube ich.
Kopiert habe ich die original bootstrap .navbar-default (wenn du es brauchst kann ich es dir) und ich veränderte die Farben. In HTML habe ich den bar sich oben fest (mit navbar-fixed-top). Ich habe noch nie etwas anderes getan außer der Suche nach etwas, das helfen könnte... ich werde in lyft, maybee, ich werde etwas finden, nützlich. EDIT: wenn ich "Blick in lyft" ich meinte, Sie suchen in Ihren css-Dateien.
Lyft nutzt angular-js und fügt die Klasse .opaque auf der Navigationsleiste, sobald der Benutzer führt einen Bildlauf zu einem bestimmten Punkt, unten auf der Seite.
Danke!!! Ich werde schauen und versuchen zu lernen, wie es zu benutzen 🙂

InformationsquelleAutor Hiperkie | 2015-04-15

  1. 30

    Ok müssen Sie den folgenden code um diesen Effekt zu erreichen: (werde ich jQuery verwenden, wie es der bootstrap-unterstützte Sprache).

    jQuery:

    /**
 * Listen to scroll to change header opacity class
 */
function checkScroll(){
    var startY = $('.navbar').height() * 2; //The point where the navbar changes in px

    if($(window).scrollTop() > startY){
        $('.navbar').addClass("scrolled");
    }else{
        $('.navbar').removeClass("scrolled");
    }
}

if($('.navbar').length > 0){
    $(window).on("scroll load resize", function(){
        checkScroll();
    });
}

    Können Sie auch ScrollSpy um dies zu tun.

    und CSS (Beispiel):

    /* Add the below transitions to allow a smooth color change similar to lyft */
.navbar {
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.navbar.scrolled {
    background: rgb(68, 68, 68); /* IE */
    background: rgba(0, 0, 0, 0.78); /* NON-IE */
}
    Ich war nicht in der Lage, um es zu starten. Ich denke, da die bar bereits fest an der Spitze. Ich werde das Skript so zu modifizieren Uhr eine andere Klasse. Ich denke, das wird das problem lösen.
    Ich löste es! Ich danke Ihnen sehr!
    Du bist herzlich willkommen
    danke David, genau das was ich gesucht habe!

    InformationsquelleAutor David Passmore

  2. 0
    $(document).ready(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > height) { 
           $('.navbar').addClass('scrolled');
       } else {
           $('.navbar').removeClass('scrolled');
       }
    });
});
    Könnten Sie näher erläutern, wie diese das problem behebt? Der code könnte richtig sein, aber Sie müssen begleitet, mit guten Erklärung.

    InformationsquelleAutor saad

Schreibe einen Kommentar