jquery-navigation in Farbe und Höhe ändern auf Bildlauf

Ich bin auf der Suche um zu ändern, die navigation, die von transparent zu einer Farbe auf Blättern. Ähnlich wie diese Website. http://createone.com/contact-us/ Ich habe gesehen, Beiträge zu ändern, dass die Größe ist toll, ich werde verwenden Sie diese als gut, möchte aber vor allem von transparent zu einer Farbe. Jede Hilfe wäre toll. Ich habe ein wenig Erfahrung mit jquery-aber nicht in der Lage, um es herauszufinden oder zu ändern, jemand anderes die vorherigen Fragen für meine Bedürfnisse.

Ich sah, dieser war aber nicht in der Lage, um es für mich zu arbeiten. jquery ändern der Deckkraft und der Höhe, auf Blättern

Einem jsfiddle demo wäre toll!

Vielen Dank im Voraus für die Hilfe. Auch ich bin mit Bootstrap-4, so dass, wenn es irgendwelche plugins die es gibt. Ich bin offen für das.

InformationsquelleAutor znels | 2013-11-26
  1. 6

    Hallo Sie können dies überprüfen, um zu beginnen : http://jsfiddle.net/rcAev/177/

    Hier ich habe diese Funktion: 

    $(document).ready (function () {
 $(window).scroll (function () {
    var sT = $(this).scrollTop();
        if (sT >= 300) {
            $('.overlay').addClass('cambio')
        }else {
            $('.overlay').removeClass('cambio')
        }
  })
})

    Ich erkläre Euch Schritt für Schritt:

    • Ersten dies führt die Funktion jedes mal, wenn Sie das Fenster scrollen

    $(window).scroll (function ()

    • Zweiten Lesen den Wert von der Spitze der Schnecke zu wissen, wie viel Sie Voraus

    var sT = $(this).scrollTop();

    • Dritten zu vergleichen, um den Haltepunkt , die Sie wollen, in diesem Fall wähle ich 300, weil ich mich ändern will der nav nach dem pass die Höhe, bilden das Bild.

      if (sT >= 300) {
        /*action you want after the 300 or more scroll*/
    }else {
        /*action you want before the 300 scroll*/
    }

    • Vierten ändern Sie die transparente Farbe die Aktion, die ich gelten, ist, eine class mit neuen hintergrund und unterschiedlicher Höhe:

      $('.overlay').addClass('cambio')
    • Das sieht toll aus! Ich werde es versuchen, auf meiner Website. Vielen Dank! Ich lasse Sie wissen, wie es geht.
    • Perfekt kann man dies mit mehr fortgeschrittene Dinge wie übergänge oder Animationen, aber dies ist, wie Sie beginnen können
    • Das ist genial! Ich habe es immer tadellos funktioniert. Gibt es eine einfache Lösung für die Verwirklichung über eine kurze Zeit, damit es nicht so ruckartig?
    • Sie können natürlich transition:all 1s; auf der überlagerung aktivieren Sie dieses jsfiddle.net/rcAev/24
    • Das ist genial vielen Dank. Sie hat mir wirklich geholfen, eine Menge.
    • wenn die Seite geöffnet wird an einem Punkt nach der overlay-Klasse wurde Hinzugefügt. wie würden Sie dies überprüfen und erneut ausführen addclass benötigt, um die Wirkung?
    • du meinst, wenn Sie öffnen Sie die Seite bereits gescrollt ?
    • ja das ist, was ich meine, sorry.

    InformationsquelleAutor DaniP
  2. 0

    In diesem Website, die navigation der Höhe nicht tatsächlich ändern. Es ist Feste Positionierung. Die navigation ist relativ positioniert, um das browser-Fenster.

    jsfiddle

    HTML:

    <ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
<div id="first"></div><div id="second"></div><div id="third"></div>

    CSS:

    ul.nav{
    position:fixed;
}
div#first{
    height:600px;
    width:100%;
    background:#59071D;
}
div#second{
    height:600px;
    width:100%;
    background:#735448;
}
div#third{
    height:600px;
    width:100%;
    background:#F2DDB6;
}
    • Ja, ich verstehe das Teil über die Festsetzung der nav aber Sie wechselte auch von transparent zu weiß auf der nav-hintergrund. Wären Sie in der Lage, mir zu zeigen, wie man so etwas machen? Vielen Dank für die schnelle Antwort btw.
    • Ändern Sie die Klasse des body-Elements entsprechend zu scrollen. Ich mache Sie einfachen Beispiel nach dem Mittagessen!
    InformationsquelleAutor Edward Lee
Schreibe einen Kommentar