Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Div qui suit le scrolling de la page

Div qui suit le scrolling de la page

05/26/2011 par Dux   -   4.4/5 (18 notes)

Le positionnement fixed du CSS ne fonctionnant pas sur les navigateurs à base d'Internet Explorer, il est donc utile de recourir au javascript pour caler un block DIV verticalement. Cette fonction corrige la valeur CSS top du div "fixedtop" en prenant en compte le scrollTop de la page dans la fenêtre.
Testé sur les navigateurs les plus courants.

Demo.

I am the fixed position DIV

code source



 
<script type="text/javascript">
   
// allocate the function to the window scrolling
   
window.onscroll = fixedTop;
   
   var
startingY = false;

   function
fixedTop() {
       
       
// First top value recovery
       
if (!startingY) startingY = parseInt(document.getElementById("fixedtop").style.top);
       
       
// Scroll top value
       
if (window.pageYOffset) {        
           var
yrt = window.pageYOffset;
       } else if (
document.body.scrollTop){
           var
yrt = document.body.scrollTop;
       } else {
           var
yrt = document.documentElement.scrollTop;
       }
       
       
document.getElementById("fixedtop").style.top = (yrt + startingY)+ "px";
   }
</script>


<div id="fixedtop" style="position:absolute; top: 20px; width: 100px; height: 100px; background: cyan">
I am the fixed position DIV
</div>

Testé avec Safari  Google Chrome  Firefox3  Firefox4  IE6  
Noter ce code     |     Copié : 791x

Commentaires pour Div qui suit le scrolling de la page

@livier     01/15/2013 17:23
merci
clem     11/14/2012 09:37
s'est bon j'ai réussi xD merci pour ton exemple
Clém     11/14/2012 09:19
j'aimerais mettre ceci

<nav>
            <div id="bloc" class="z1"><p>zone1</p></div>
                    <div id="bloc" class="z2"><p>Nouveaux</br>
                    sélecteurs</div>
                    <div id="bloc" class="z3"><p>zone3</p></div>
                    <div id="bloc" class="z4"><p>Ombre</p></div>
                    <div id="bloc" class="z5"><p>image</p></div>
                    <div id="bloc" class="z6"><p>autres<br>
                    sélecteurs</p></div>
                    <div id="bloc" class="z7"><p>zone7</p></div>
                    <div id="bloc" class="z8"><p>Transparence</p></div>
                    <div id="bloc" class="z9"><p>zone9</p></div>
            </nav>

a la place de ton "i am the fixed position div"
comment je doit faire ??
vinodh     10/19/2012 15:47
thanks
funkyFAB     09/06/2012 14:28
Merci l'artiste !
titou310192     08/10/2012 13:25
Enfin !!!!! C'est exactement ce que je cherchais depuis 2 jours !!!! Merci !!!!!!!!!
Yvanoph     06/27/2012 18:38
Dommage, sautille trop !
Naxilolz     12/21/2011 15:13
Merci pour le petit tuto tres pratique mais j'ai un soucis au niveau du scrolling.
Au moment ou tu fais "startingY = parseInt(document.getElementById("fixedtop").style.top)" dans le "if"
j'ai fais un alert(parseInt(document.getElementById("fixedtop").style.top)) et il me renvoie un erreur NaN (Not A Number) Une idée d'ou ça vient ?
kiki     09/24/2011 23:02
Merci
Ajouter un commentaire Pseudo   Site
ZOOM


Div qui suit le scrolling de la page
Largeur image dynamique selon son emplacement
Lien à confirmer
Loupe image javascript
Zoom en CSS3
Scroll div avec javascript
Cacher afficher un DIV avec scrolling
Déplacer un objet DOM vers le haut
Création de dossiers virtuels avec htaccess
Fonction pour fermer les balises HTML