J'ai un logo sur la barre de navigation de mon site et j'aimerais que la couleur de celui-ci change lorsque je scroll la page (sachant que la barre de navigation reste toujours en haut du site.)
Je pensais donc a faire deux logo de deux couleurs différentes mais je ne sais comment faire pour remplacer le premier par le deuxième.
Ensuite, il faut savoir comment est ton logo. Un SVG serait le mieux, sinon ça dépend de ce que tu veux faire ; changer de couleur est éventuellement possible selon l'image.
Sur la même idée que l'exemple, mets-en un en image dans le html, l'autre en background ; au scroll, tu passes l'opacité de l'image de 1 à 0 pour que le fond apparaisse.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Oki, merci beaucoup j'ai compris l'explication mais malheureusement je crains que sur la pratique, etant nouveau dans le domaine, ne trouve comment faire.
J'ai essayer le script que tu m'a donné mais malheureusement je n'y suis pas arrivé...
Voila mes fichiers:
index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test script</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link rel="icon" href="img/iconefav.ico" />
<header class="header" data-sticky>
<a href="#" class="header__logo">
<img class="header__image" src="//user.oc-static.com/upload/2017/08/07/1502057342504_hermine%20blanche.png" alt="">
</a>
</header>
<main class="main">
<h1>Scroll me down!</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perspiciatis illum ea, sit voluptas iure facere impedit consequatur perferendis quam nemo unde dolore assumenda non, a, eveniet nostrum corporis eius dolorem ex autem incidunt architecto. Sint dolorem natus quis, cumque quos maxime magni quasi quae, explicabo tempora? Tenetur earum, quia fuga quidem, modi, sed pariatur nostrum voluptatibus mollitia asperiores corrupti quibusdam voluptates excepturi nemo doloribus incidunt. Veniam, accusantium cum facere ducimus suscipit sint, qui veritatis quis debitis earum quas voluptas placeat eos facilis blanditiis explicabo libero illum ut iusto dolore sit. Voluptatem, sunt. Quisquam sunt non qui ipsa. Ducimus, consequuntur, aspernatur, non vitae eligendi tenetur fugit itaque, quod delectus neque placeat adipisci dolor voluptatum officiis cum eius culpa! Accusantium est nam cupiditate culpa odit. Dolor iure ullam a eligendi doloremque nisi neque, voluptates odit animi exercitationem, mollitia non at, atque dolore aspernatur magni veniam! Sapiente error veritatis vero quo ipsum quisquam ducimus voluptate facere magnam! Alias voluptatem dolor tenetur ipsam molestias repellendus repellat eaque asperiores eos ipsum. Delectus tempore hic pariatur perferendis a suscipit ullam illum harum numquam. Vero doloribus animi numquam ab, repellendus eius deleniti accusantium maxime inventore nemo minima eos ducimus architecto aliquid laborum labore quae nisi eaque pariatur quo sequi, aliquam? Magnam, inventore rerum sunt molestiae necessitatibus maxime nisi obcaecati, neque voluptates nam! Nulla, odit soluta enim autem quidem iste, quasi aut quos suscipit incidunt itaque doloribus perspiciatis. Quo magni natus voluptates mollitia dolorem possimus tempora amet quas porro labore illum optio, eveniet perferendis, aperiam ut culpa dolores alias nisi id quasi? Exercitationem explicabo incidunt eum repellat ratione sapiente similique fugiat numquam praesentium. Et saepe, rerum soluta odio, praesentium quidem delectus reiciendis nihil. Vel a, cupiditate! Odit, ab at praesentium hic quos harum eum? Dolorem animi, explicabo. Vel quaerat fuga, inventore itaque tempore voluptate. Nam, asperiores suscipit at, mollitia incidunt quis non hic, a, esse quaerat doloribus dolorem officia dolores laborum ut. Voluptates non cumque hic ipsa saepe voluptatem cupiditate error repudiandae, sapiente minus vel omnis atque? Autem officia quaerat dolorem quidem excepturi et accusantium ipsam facere culpa asperiores, maxime accusamus unde. Itaque consequatur nobis error, earum aliquam possimus suscipit consequuntur deserunt nihil alias a nulla fuga dolorem corporis neque omnis voluptates, dolores ipsam ex eveniet libero. Eaque aspernatur quo, animi fugiat saepe voluptatem laborum iste odit facere ea fugit enim expedita maiores quisquam commodi aperiam a amet nesciunt illo! Ullam harum cum accusamus veritatis ipsa ad? Dolorem, quod voluptatum. Deserunt harum magni vitae iure amet sunt rerum maxime dolores consequuntur at. Officiis labore quibusdam ipsam voluptas voluptatum at magnam laudantium voluptatem? Quisquam culpa sunt quas accusantium velit numquam nulla odio sit esse. Cupiditate corporis, officiis eum nostrum libero aliquid ut voluptatum totam, quis provident voluptatibus deserunt, delectus porro numquam at tempora necessitatibus amet inventore suscipit ea magnam vero? Impedit adipisci, aliquid cum similique labore praesentium, tempora optio eum ducimus blanditiis fugit quod delectus omnis aliquam, perspiciatis quasi. Aspernatur excepturi corrupti ab, dolorum, consequatur optio doloremque. Fugit ea, saepe aut accusantium id consectetur eligendi consequuntur praesentium, natus laboriosam facere nesciunt quam assumenda eveniet ad, tempore ex, rem explicabo blanditiis quis totam! Dolorum aliquid suscipit quidem ipsa asperiores, cumque totam in cupiditate labore enim voluptas vero. Quibusdam consequuntur laboriosam error porro optio pariatur dolorum saepe placeat, dignissimos doloremque aliquam, reiciendis voluptatibus est temporibus modi, doloribus necessitatibus deserunt fugit dolor incidunt. Doloribus rerum ipsa hic dolorum, quam eos tempora molestiae ipsam dicta eligendi laudantium quae quasi. Perferendis excepturi asperiores eos deleniti ipsam at, non enim dolorum. Dolorum modi tempore beatae eveniet commodi atque aperiam incidunt saepe fugit eum, debitis quaerat eligendi libero, nulla quibusdam dignissimos fuga iusto accusamus voluptas molestiae autem id magni culpa nihil. Nobis illum, minima odit quia soluta optio exercitationem velit harum debitis laboriosam praesentium, eligendi, molestiae facere veritatis provident incidunt unde quibusdam. Minus cumque saepe officiis unde vero facilis pariatur facere fugit aperiam sit ratione eaque maiores et, doloribus nihil, commodi debitis deleniti consequatur delectus sunt deserunt quae mollitia, quia reiciendis. Aspernatur error atque vero nam dolorum nobis aperiam accusamus. Dignissimos qui quod amet dolore aliquam odio doloribus consequatur non, voluptas fugiat totam rem iusto? Sapiente quasi, quos beatae voluptatem eius ullam magni deserunt distinctio, praesentium quo, vel ipsa illo sed esse culpa expedita repudiandae illum fugiat! Veniam molestias autem, voluptatum, quia repellendus a et dolor, voluptate excepturi doloremque recusandae dignissimos quo. Non facilis dolorum magni cum qui fugiat eaque dicta aspernatur minima quos minus necessitatibus aut quisquam hic quod optio quia sapiente rerum dolores, delectus consectetur, voluptatibus. Animi voluptatem sint, vitae dolores rem qui necessitatibus vero, sed nobis illo iste aliquid veritatis! Modi ipsam nemo vero et facere est doloribus, magnam facilis maxime quidem sequi deserunt reiciendis eos dignissimos eveniet, commodi culpa eligendi minima debitis ut, delectus dolore ipsum distinctio! Soluta harum iusto accusamus illo et quidem reiciendis temporibus, ducimus, necessitatibus nemo ut repellendus.
</main>
</head>
</html>
var izziSticky = new IzziSticky('[data-sticky]', {
heightValue: 1,
classIsSticky: 'is-sticky'
});
Logo qui change de couleur
× 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.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !