Bonjour à tous !
Question : Je cherche à savoir comment faire pour qu'une div, qui est déjà fixed au fond d'une page web, à un moment donné du scrolling soit fixed.
Je m'explique :
Je créer actuellement un site sous Wordpress, j'ai une page de devis automatique avec l'affichage du prix en direct sur la page suivant les sélections de services. J'ai le prix qui est dans un div, qui lui est fixed au fond de la page. Je souhaiterais, que lorsque l'élément div en question arrive à la hauteur du footer, qu'il change de position et qu'il soit collé en dessus du footer (tag sticky : trouvé ce tag sur internet).
J'ai trouvé un article regroupant un peu la même demande que moi, mais je n'arrive pas à faire fonctionner correctement. (lien vers le forum en question)
Actuellement, ma page ressemble à celle-ci :
On peut voir, en bas le div (bande blanche avec ombrage vers le haut) et à l'intérieur, le prix du devis automatique.
Malheureusement, quand je passe au niveau du footer, il passe devant, donc n'est vraiment pas pratique !
Pour mieux comprendre ce que je souhaite, j'ai réalisé un petit montage photo :
D'avoir le div avec le prix (bande bleu) accroché au footer, uniquement lorsqu'on le dépasse !
Pour encore mieux vous faire comprendre et éviter les questions, j'ai un site d'un FAI, qui contient un configurateur, et a ce système sur son site web : Swisscom configurateur
Je vous mets ci-dessous le code CSS et JS que j'ai essayé.$
Les class des éléments sont les suivants :
Code :
- #total-line /* Prix du devis (CHF 0.00) */
- #montant-devis-titre /* Titre "Montant estimé du projet" en lien avec le Prix du devis */
|
Code CSS :
Code :
- .total-line
- {
- color:#d80808;
- }
- .montant-devis-titre
- {
- color:#black;
- background-color:white;
- box-shadow: 0px -10px 15px #eeeeee;
- }
- .montant-devis-titre
- {
- position:fixed;
- bottom: 0;
- left:0;
- right:0;
- z-index:9999;
- padding:10px 0;
- padding-top:10px;
- padding-right: 0px;
- padding-bottom: 0px;
- padding-left: 0px;
- text-align:center;
- }
- .fixgauche
- {
- z-index: 9999;
- position: fixed;
- bottom: 409px;
- }
|
Code JavaScript :
Code :
- $(function(){
- $(window).scroll(
- function () {//Au scroll dans la fenetre on déclenche la fonction
- if ($(this).scrollTop() > 409) { //si on a défini de plus de 409 px du haut vers le bas
- $('#montant-devis-titre').addClass("fixgauche" ); //on ajoute la classe "fixgauche" à <div id="montant-devis-titre">
- } else {
- $('#montant-devis-titre').removeClass("fixgauche" );//sinon on retire la classe "fixgauche" à <div id="montant-devis-titre">
- }
- }
- );
- });
|
Informations supplémentaires :
- La hauteur total du footer est de 409 px
- Lien du site Codepen qui démontre ma question (mais qui ne fonctionne pas de mon côté) : Codepen
Je vous remercie d'avance pour le temps que vous prendrez à mon problème, j'attends avec impatience vos réponses !
Cordialement,
Sam
Message édité par sniickerz le 10-01-2018 à 15:13:17