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

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Div following the scrolling of the page

Div following the scrolling of the page

05/26/2011 by Dux   -   4.5/5 (17 ratings)

CSS fixed positioning does not work on Internet Explorer based browsers, it is therefore useful to use the javascript to fix vertically a DIV block.
This function addresses the value of the div top CSS "fixedtop" taking into account the scrollTop of the page in the window.
Tested on the most common browsers.

Demo.

I am the fixed position DIV

source code



 
<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>

Tested with Safari  Google Chrome  Firefox3  Firefox4  IE6  
Rate this code     |     Copied : 774x

Comments for Div following the scrolling of the 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
Add a comment Nickname
ZOOM


Div following the scrolling of the page
Show hide DIV content with scrolling
Dynamic image resizing according to location
Simple image gallery PHP
Zoom with CSS3
Dynamically add rows to a form. Complete solution
Move dynamically a DOM objet up
Create virtual folders using htaccess
Close HTML tags function
Scroll div with javascript