Partage
  • Partager sur Facebook
  • Partager sur Twitter

Jquery : Changement de couleur du header au scroll

    23 juillet 2017 à 21:07:24

    bonjour

    Voilà je coince un peu sur un bout de code. Je fais un test concernant le changement de couleur du header lors du scroll, sachant qu'il y aura une couleur différente pour chaque div parcourus. La particularité est la suivante : on imagine que nous ne connaissons pas le nombre de div. J'ai donc créé une toute petite fonction pour compter le nombre de div.container, j'ai mis le résultat dans un tableau. J'ai créé une fonction pour charger des couleurs de manière aléatoire. J'utilise offset().top pour la position de chaque div, mais je bloque pour la comparaison avec le ScrollTop(). Comme nous ne connaissons pas le nombre de div à l'avance...

    Je poste les codes html et js ci dessous, et merci d'avance pour votre aide précieuse !

    <body>
            <header>
                <h1>Title</h1>
                <nav>
                    <li><a href="#">link1</a></li>
                    <li><a href="#">link2</a></li>
                    <li><a href="#">link3</a></li>
                    <li><a href="#">link3</a></li>
                </nav>
            </header>
            <div class="main">
                <div class="container" id="block1">
                    <a href="" class="anchor"></a>
                </div>
                <div class="container" id="block2">
                    <a href="" class="anchor"></a>
                </div>
                <div class="container" id="block3">
                    <a href="" class="anchor"></a>
                </div>
                <div class="container" id="block4">
                    <a href="" class="anchor"></a>
                </div>
            </div>
        </body>
    var index = 0;
    var param;
    var r;
    var g;
    var b;
    var tab = new Array();
    var tab_pos = new Array();
    
    $( document ).ready(function() {
        LengthChildrenMain('.main > .container');
    
        $(window).scroll(function () {
            $('.anchor').each(function () {
                var w = $(window).scrollTop();
                var t = $('.anchor').offset().top - 100;
                if (w > t) {
                    $('header').css({background: 'red'}); // Test with one color a
                    ChangeColor();
                }
            });
        });
    });
    
    //function ChangeColor(){
    //    r = Math.floor((Math.random()*255)+1);
    //    g = Math.floor((Math.random()*255)+1);
    //    b = Math.floor((Math.random()*255)+1);
    //    $('header').css({background: 'rgb('+r+','+g+','+b+');'});
    //}
    
    function LengthChildrenMain(param) {
        $(param).each(function (index) {
            tab[index] = $(param).children('.anchor');
    
        });
    }
    




    • Partager sur Facebook
    • Partager sur Twitter

    Jquery : Changement de couleur du header au scroll

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown