Comment faire de la navigation de la barre change de couleur lorsque vous faites défiler la page?

Je tiens la barre de navigation pour être transparente, mais lorsque vous faites défiler la page, il change de couleur rouge par exemple.

<div class="nav">
      <div class="container">
       <div class="logo">
       <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a>
       </div>
        <div class="navMain">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
      </div>
    </div>
InformationsquelleAutor user3218008 | 2014-12-05
  1. 13

    Quelque chose comme ceci:

    http://jsfiddle.net/qrhjdfmd/

    var a = $(".nav").offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > a)
    {   
       $('.nav').css({"background":"red"});
    } else {
       $('.nav').css({"background":"transparent"});
    }
});
    • Merci pour cela. Savez-vous comment faire un fondu à la couleur de l'apparaître?
    • Ajouter CSS transition de la propriété comme ceci: jsfiddle.net/qrhjdfmd . S'il vous plaît, marque ma réponse comme correcte si elle est utile.
    • Merci de prendre le temps de répondre à la question. J'ai utilisé ce - .nav {transition-durée: 1s;} avec cette Jquery: $(document).ready(function(){ var scroll_start = 0; var startchange = $('.nav'); var offset = startchange.offset(); $(document).scroll(function() { scroll_start = $(this).scrollTop(); if(scroll_start > offset.haut de page) { $('.nav').css('background-color', 'rgba(34,34,34,0.9)'); } else { $('.nav').css('background-color', 'transparent'); } }); });
    • Désolé je ne peux pas voter pour votre réponse, cela dit je n'ai pas une réputation de 15 ans. Mais je ne l'apprécie énormément de temps et d'aide.
    • Désolé, j'ai posté jsfiddle lien, mais j'ai oublié d'enregistrer les modifications. Suivez ce lien: jsfiddle.net/qrhjdfmd/1
    • Cela devrait être la solution retenue. +1

    InformationsquelleAutor KaMZaTa
  2. 2

    Si quelqu'un veut être à la recherche pour un non-jquery solution (vanilla js), elle est ici:

    document.addEventListener("DOMContentLoaded", function () {
    var scrollStart = 0;
    var nav = document.querySelector(".nav");
    var offset = navbarElement.getBoundingClientRect();

    document.onscroll = function (e) {
        scrollStart = e.target.scrollingElement.scrollTop;
        if (scrollStart > offset.top) {
            nav.style.background-color, rgba(34,34,34,0.9);
        } else {
            nav.style.background-color = "transparent";
        }
    };
});
    InformationsquelleAutor JKL
  3. 1

    Solution par OP.

    Jquery

    $(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('.nav');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.nav').css('background-color', 'rgba(34,34,34,0.9)');
       } else {
          $('.nav').css('background-color', 'transparent');
       }
   });
});

    CSS

    .nav {
transition-duration: 1s;
}

    Cela devrait permettre une navigation transparente et quand vous faites cela va changer à rgba(34,34,34,0.9)

    InformationsquelleAutor