Modifier dynamiquement le style inline et la classe d'un div

Modifier dynamiquement le style inline et la classe d'un div - HTML/CSS - Programmation

Marsh Posté le 05-03-2016 à 16:20:26    

Salut
 
Je voudrais savoir comment est modifié le style (inline + la classe) d'un <div> lorsque l'utilisateur scrolle la page par ex.
Ex: quand la page est chargée

Citation :

<div style="height: 101px;" class="sticky-wrapper" id="siteHeader-sticky-wrapper">
<header style="" id="siteHeader" class="siteHeader">


 
Puis quand l'utilisateur scrolle:

Citation :

<div style="height: 130px;" class="sticky-wrapper sticky" id="siteHeader-sticky-wrapper">
<header style="width: 1519px; position: fixed; top: 0px;" id="siteHeader" class="siteHeader">


 
Ce qui m'intéresse surtout, c'est l'ajout de la classe "sticky". C'est fait via du JS ?


---------------
Steve Jobs est quand même un sacré magicien. Avec une seule pomme, il a fait naître des millions de poires.
Reply

Marsh Posté le 05-03-2016 à 16:20:26   

Reply

Marsh Posté le 06-03-2016 à 12:23:20    

Oui c'est en JS. Tu peux te servir de l'event onScroll pour obtenir le positionnement X et Y de ta page, et ensuite appliquer la ou les classes de ton choix.
Via jQuery c'est assez simple : http://www.webtutoriaux.com/tutori [...] teurs.html
Pour changer la classe à la volée, tu peux faire en une seule ligne dans l'event :
$('div.sticky-wrapper').toggleClass ('sticky')
http://api.jquery.com/toggleclass/


---------------
We deserve everything that's coming...
Reply

Sujets relatifs:

Leave a Replay

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