Fixer une div déjà fixée à un moment du scrolling.

Fixer une div déjà fixée à un moment du scrolling. - HTML/CSS - Programmation

Marsh Posté le 10-01-2018 à 14:46:08    

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 : https://www.zupimages.net/up/18/02/gyxt.png
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 : https://www.zupimages.net/up/18/02/33yy.png
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 :
  1. #total-line /* Prix du devis (CHF 0.00) */
  2. #montant-devis-titre /* Titre "Montant estimé du projet" en lien avec le Prix du devis */


 
Code CSS :

Code :
  1. .total-line
  2. {
  3.     color:#d80808;
  4. }
  6. .montant-devis-titre
  7. {
  8.     color:#black;
  9.     background-color:white;
  10.     box-shadow: 0px -10px 15px #eeeeee;
  11. }
  13. .montant-devis-titre
  14. {
  15.     position:fixed;
  16.     bottom: 0;
  17.     left:0;
  18.     right:0;
  19.     z-index:9999;
  20.     padding:10px 0;
  21.         padding-top:10px;
  22.         padding-right: 0px;
  23.         padding-bottom: 0px;
  24.         padding-left: 0px;
  25.     text-align:center;
  26. }
  28. .fixgauche
  29. {
  30.     z-index: 9999;
  31.     position: fixed;
  32.     bottom: 409px;
  33. }


 
Code JavaScript :

Code :
  1. $(function(){
  2. $(window).scroll(
  3. function () {//Au scroll dans la fenetre on déclenche la fonction
  4. if ($(this).scrollTop() > 409) { //si on a défini de plus de 409 px du haut vers le bas
  5. $('#montant-devis-titre').addClass("fixgauche" ); //on ajoute la classe "fixgauche" à <div id="montant-devis-titre">
  6. } else {
  7. $('#montant-devis-titre').removeClass("fixgauche" );//sinon on retire la classe "fixgauche" à <div id="montant-devis-titre">
  8.     }
  9.    }
  10.   );
  11.  });


 
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
Reply

Marsh Posté le 10-01-2018 à 14:46:08   

Reply

Marsh Posté le 12-01-2018 à 19:05:39    

Bonjour,

 

Perso en faisant un truc du genre (javascript sans jquery) ça fonctionne :

 
Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Page d'essai</title>
  6.     <style type="text/css">
  7.         body {
  8.             margin: 0px 0px 0px 0px;
  9.             width: 100%;
  10.         }
  11.         div {
  12.             width: 100%;
  13.             text-align: center;
  14.         }
  15.         div.main {
  16.             height: 1280px;
  17.             overflow: hidden;
  18.         }
  19.         div.scrolldiv {
  20.             height: 60px;
  21.             line-height: 60px;
  22.             background-color: #AADD44;
  23.             position: fixed;
  24.             bottom: 0px;
  25.         }
  26.         div.sticky {
  27.             position: sticky;
  28.             bottom: 140px;
  29.         }
  30.         div.content {
  31.             height: 1000px;
  32.             line-height: 1000px;
  33.         }
  34.         div.header {
  35.             height: 140px;
  36.             line-height: 140px;
  37.             background-color: #4488AA;
  38.         }
  39.         div.footer {
  40.             height: 140px;
  41.             line-height: 140px;
  42.             background-color: #6688DD;
  43.             overflow: hidden;
  44.         }
  45.     </style>
  46.     <script type="text/javascript">
  47.         function jawascript() {
  48.             document.addEventListener('scroll', stick);
  49.         }
  50.         function stick() {
  51.             var el = document.getElementById('scrolldiv');
  52.             var LimitY = document.body.clientHeight - document.getElementById('footer').clientHeight - window.innerHeight; //distance par rapport au haut de page à partir de laquelle notre élément arrivera en butée contre l'élément de bas de page soit : [taille de la page] - [taille de l'élément de bas de page] - [taille de la fenêtre (sans la barre de défilement)]
  53.             if (window.pageYOffset >= LimitY) { //lorsque le défilement atteint la limite préalablement définie on change le pesitionnement en sticky
  54.                 el.classList.add('sticky');
  55.             } else if (window.pageYOffset < LimitY && el.classList.contains('sticky')) { //lorsque le défilement redevient inférieure à la limite définie (i.e. lors de la remontée du défilement) et que le positionnement de l'élément avait été modifié en sticky
  56.                 el.classList.remove('sticky');
  57.             }
  58.         }
  59.     </script>
  60. </head>
  61. <body onLoad="jawascript()">
  62.     <div class="main">
  63.         <div class="header">header</div>
  64.         <div class="content">content</div>
  65.         <div class="footer" id="footer">footer</div>
  66.         <div class="scrolldiv" id="scrolldiv">test</div>
  67.     </div>
  68. </body>
  69. </html>
 

Donc j'ai retenu qu'il fallait que la div soit en position 'fixed' lors du défilement puis en 'sticky' lorsque l'utilisateur est arrivé en bas de page. La div doit se trouver à l'intérieure d'une autre qui va permettre de cacher l'overflow créé par le positionnement. Et enfin la div mobile doit être le dernier élément de la div parente pour que la position sticky fonctionne bien à partir du bottom (et inversement premier élément pour fonctionner par rapport au top).
L'inconvénient de cette méthode c'est qu'elle suppose de paramétrer une hauteur à la div parente et donc de connaître la hauteur de chaque élément se trouvant à l'intérieur.
Un petit dysfonctionnement apparaît lorsque qu'une barre de défilement horizontale est visible, cela vient de la propriété window.innerHeight qui ne prend pas en compte la hauteur de la barre de défilement mais je pense que jquery doit proposer une méthode qui en tient compte.
À noter que 'sticky' n'est compatible que pour les navigateurs récents.


Message édité par MaybeEijOrNot le 12-01-2018 à 19:06:16

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 16-05-2018 à 09:35:12    

Il faut modifier l'HTML.
 
Mets juste le footer après l'élement que tu as mis en position: sticky et pas dans le conteneur de cet élément et çà marchera.  
 
Sticky respecte l'ordre du flux HTML.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed