Changer la couleur de fond du Header suivant le scroll

Bonjour à tous,

Je suis actuellement en train de faire un site internet sur Wordpress (mon premier) et j'utilise le thème Salient.

Je souhaite que ma barre de navigation soit transparente en haut de la page mais qu'elle prenne un fond coloré à partir du moment où on scroll. J'ai pu voir pas mal de choses sur ce forum et sur d'autres qui donnent des astuces pour coder ce genre de choses en css mais cela ne semble pas fonctionner avec Salient.

Salient propose en effet déjà toutes ces options mais elles ne semblent fonctionner que dans une mise en page bien particulière. Actuellement, j'utilise le format "row en full screen" ce qui semble forcer mon header à être transparent sur la page entière. Si je prends la mise en page classique, aucun problème j'arrive à faire ce que je veux.

J'aimerais donc savoir s'il existe un code css qui permettrait de forcer mon header à prendre un fond coloré après le scroll.

Voici ce que je récupère en inspectant mon header :

Code:

---

1 2

<div id="header-outer" data-has-menu="true" data-transparent-header="true" data-transparent-shadow-helper="false" data-remove-border="true" class="transparent dne-disabled at-top" data-has-buttons="no" data-using-pr-menu="false" data-mobile-fixed="1" data-ptnm="false" data-lhe="animated_underline" data-user-set-bg="#020f24" data-format="default" data-permanent-transparent="false" data-megamenu-rt="0" data-remove-fixed="0" data-cart="false" data-transparency-option="" data-box-shadow="large" data-shrink-num="5" data-full-width="true" data-condense="false" data-using-secondary="0" data-using-logo="1" data-logo-height="90" data-m-logo-height="24" data-padding="28" data-header-resize="0" style="padding-top: 28px; transform: translateY(0px); top: 32px;"> </div>

---

Merci d'avance pour votre aide !

Bonjour,

montre-nous ta page en ligne.

Bonjour,

Je m'occupe d'un site internet créé sur wordpress et j'aimerais changer le fond du header quand on scroll : transparent en haut de la page, avec un fond sinon. J'utilise le thème salient qui permet déjà de configurer beaucoup de choses mais surtout lorsqu'on utilise un format classique.

Je ne m'y connais pas du tout en javascript mais je suis tombé sur ce code qui fait exactement ce que je souhaite... Mais ça ne marche pas.
J'ai créé un fichier jquery et ai modifié le css sauf que je pense que je n'utilise pas le bon nom de mon header.

Voici le code qui m'intéresse : http://jsfiddle.net/634d6vgq/2/

Voici ce que j'ai mis en JS :

Code:

---

1 2 3 4 5 6 7 8 9 10

$(function() { $(window).on("scroll", function() { if($(window).scrollTop() > 50) { $(".header-outer").addClass("active"); } else { //remove the background property so it comes transparent again (defined in your css) $(".header-outer").removeClass("active"); } }); });

---

Voici ce que j'ai en inspectant mes éléments :

Code:

---

Body class="page-template-default page page-id-7766 logged-in admin-bar ascend wpb-js-composer js-comp-ver-5.5.2 vc_responsive customize-support"

---

Et un peu plus bas je retrouve mon header:

Code:

---

1 2 3 4 5 6

<div id="header-outer" data-has-menu="true" data-transparent-header="true" data-transparent-shadow-helper="true" data-remove-border="true" class="transparent dne-disabled" data-has-buttons="no" data-using-pr-menu="false" data-mobile-fixed="1" data-ptnm="false" data-lhe="animated_underline" data-user-set-bg="#020f24" data-format="default" data-permanent-transparent="false" data-megamenu-rt="0" data-remove-fixed="0" data-cart="false" data-transparency-option="1" data-box-shadow="large" data-shrink-num="5" data-full-width="true" data-condense="false" data-using-secondary="0" data-using-logo="1" data-logo-height="90" data-m-logo-height="24" data-padding="28" data-header-resize="0" style="padding-top: 28px; top: 33px;"> <header id="top"> <div class="container" style="visibility: visible;"> <div class="row"> <div class="col span_3"> ...

---

Je ne sais pas du tout comment relier tout ça à mon code :(
Merci d'avance pour votre aide.

Salient est un thème payant.
Donc...

Et de ce que j'ai vu (démo), il fait ce que tu veux (changement de couleur de fond du menu au scroll) "par défaut".

Donc, si tu ne montres pas ton site en ligne, c'est tout ce que je peux dire.

Désolé je n'avais pas vu ta réponse, merci pour ton aide.
Voici une des pages du site : http://lereseausynapse.com/prestations/

J'essaye déjà de modifier le fond uniquement en css sans prendre en compte le scroll mais même comme ça ça ne marche pas...
J'ai vu avec inspecter, dans style l'élément suivant :

Code:

---

1 2 3 4

@media only screen and (min-width: 1001px) html body #header-outer[data-transparent-header="true"].transparent { background-color: #ffffff!important; box-shadow: none!important; }

---

En changeant en direct la couleur cela fonctionne, par contre dès que je le mets en script css de ma page ça ne fait rien...

Si on se réfère à ces démos, ça le fait bien :

• http://themenectar.com/demo/salient-promo/
• http://themenectar.com/demo/salient-band/
• http://themenectar.com/demo/salient-ecommerce-creative/
• ...

A priori, il faut chercher du coté de #header-outer.

Je ne saurais pas en dire plus.

Merci pour ta réponse. Oui, ça le fait bien mais sur les pages qui se scrollent de a à z.
Dans le cas où on utilise un format full row (c'est à dire des slide qui se changent avec les anchor point sur la droite de ma page), les options disparaissent.
Je suis obligé de passer par du css et surement du jquery...

Bonjour,

J'ai fini par réussir à changer le background de ma navigation.
En utilisant ce code css :

Code:

---

html body #header-outer[data-transparent-header="true"].transparent{background-color: #a03c3c!important;box-shadow:none!important;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;border-bottom:1px solid rgba(255,255,255,0.25)!important;}

---

Maintenant je souhaite passer à l'étape suivante qui est de rendre le changement de couleur dépendant du scroll.
J'ai donc créé un js file :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

jQuery(document).ready(function($){   $(function() { $(window).on("scroll", function() { if($(window).scrollTop() > 5) { $(".header-outer").addClass("activeheader"); } else { //remove the background property so it comes transparent again (defined in your css) $(".header-outer").removeClass("activeheader"); } }); }) });

---

et j'ai mis le code suivant dans mon script css :

Code:

---

1 2 3

.header-outer.activeheader{ html body #header-outer[data-transparent-header="true"].transparent{background-color: #a03c3c!important;box-shadow:none!important;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;border-bottom:1px solid rgba(255,255,255,0.25)!important;} }

---

Mais il ne se passe rien du tout. Ma barre reste transparente. Une idée de pourquoi ?

Bonjour,
sans regarder le reste simplement

Citation:

---

Envoyé par education

et j'ai mis le code suivant dans mon script css :

Code:

---

1 2 3

.header-outer.activeheader{ html body #header-outer[data-transparent-header="true"].transparent{background-color: #a03c3c!important;box-shadow:none!important;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;border-bottom:1px solid rgba(255,255,255,0.25)!important;} }

---

---

Ce que tu as écris c'est n'importe quoi comme règle CSS, reprend les bases ;)

Merci pour ta réponse.
Je me doute que c'est n'importe quoi, je n'y connais absolument rien, c'est la première fois que j'utilise du css. Je n'ai donc aucune base et comme je n'ai pas vraiment le temps de m'y pencher avec un emploi du temps déjà très garni, je me permets de poser les questions ici.
Peux tu me dire ce qui ne marche pas et me donner une solution ?

Par ailleurs c'est peut être du n'importe quoi mais ça marche quand je le mets dans le css personnalisé de la page ^^'

Citation:

---

Je n'ai donc aucune base et comme je n'ai pas vraiment le temps de m'y pencher avec un emploi du temps

---

il y a quand même un minimum minimorum à apprendre/connaître !

Citation:

---

Peux tu me dire ce qui ne marche pas et me donner une solution ?

---

Ton code, indenté, donne

Code:

---

1 2 3 4 5 6 7 8 9 10

.header-outer.activeheader { html body #header-outer[data-transparent-header="true"].transparent { background-color: #a03c3c !important; box-shadow: none !important; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important; } }

---

On ne met pas une règle dans une règle

Citation:

---

Par ailleurs c'est peut être du n'importe quoi mais ça marche quand je le mets dans le css personnalisé de la page

---

:koi:

Merci pour ta réponse.
Oui tu as raison, j'essaye mais j'ai du mal à trouver ce qui pose problème.
En l’occurrence ici mon code dans mon code, je vois bien que ça ne peut pas marcher... Mais ce qui me perturbe c'est ce html body.
Je devrais plutôt faire comme ça ??

Code:

---

1 2 3 4 5 6 7 8

html body #header-outer[data-transparent-header="true"].activeheader.transparent { background-color: #a03c3c !important; box-shadow: none !important; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important; }

---

Bon j'avance, même si je me sens un peu seul.

J'ai remarqué qu'un attribut décidait déjà de la transparence de mon nav menu.

Si j'utilise ce code sur une page qui se scrolle de façon classique aucun problème :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

jQuery(document).ready( function($){ $(window).on("scroll", function() { if($(window).scrollTop() > 50) { $("#header-outer").attr('data-transparent-header',"false"); $("#header-outer").attr('data-permanent-transparent',"false"); } else { //remove the background property so it comes transparent again (defined in your css) $("#header-outer").attr('data-transparent-header',"true"); } }); });

---

Ca fait exactement ce que je souhaite.

Le problème c'est que quand je prends ma page en parallax ça ne marche plus. C'est comme si la fonction scroll ne fonctionnait plus.
Savez vous comment je peux corriger ce problème ?

En fait si, j'arrive à rentrer dans mes if et il a l'air de bien détecter la valeur de scroll initiale.
Par contre c'est comme s'il ne mettait plus sa valeur à jour par la suite...
Comment puis je faire ?

L'autre façon de faire que je vois, c'est récupérer la slide sur laquelle je me trouve.
A chaque fois, il crée une classe "active" sur la slide où je suis.
Comment je peux dire "si cette href est active, alors faire..." ?
Ca va être un peu laborieux parce que ça m'obligera à le faire sur chaque page de mon site pour chaque slide...

Code:

---

<a href="#Phases d'inscription" class="active"><span></span></a>

---

Citation:

---

Envoyé par education

Comment je peux dire "si cette href est active, alors faire..." ?

---

Tu peux par exemple stocker le top de l'élément "a.active" que tu cherches dans une variable

Code:

---

1 2	var top_=$("a.active").offset().top;//get le top du a.active

---

et puis tu vérifie si le scrollTop est égale au top du a.active

Code:

---

1 2 3 4 5 6 7

if(parseInt(top_)==parseInt($(window).scrollTop())){ /* code */ } else{ /* code */ }

---