slide out div when scrolling

[toolman]

Hi,

 

Does anyone know where I can find a script that displays a div when you scroll down the page, like this:

 

http://www.dreamgrow.com/facebook-cheat-sheet-sizes-and-dimensions/

 

- if you scroll down a bit you will see a box slide out.

 

Thanks.

[denno020]

You can do this with javascript. window.pageYOffset is how far the window will need to scroll before your div is going to show.

 

function testScroll(ev){
 if(window.pageYOffset>270){
   document.getElementById("top").className = "show"; //Apply a css class which gives it the property display: inline; (this is the default display)
 }else if(window.pageYOffset<270){
   document.getElementById("top").className = "hide"; //Apply a css class which gives it the property display: none;
 };
}

//Run the above function whenever the window scrolls
window.onscroll=testScroll();

 

Hopefully that'll get your started.

 

Denno

Edited February 17, 2013 by denno020

[enlighteneditdevelopment]

To get your complicated questions answered or requirements met get in touch with our expert PHP developers.

[Frank P]

 

function testScroll(ev){  if(window.pageYOffset>270){    document.getElementById("top").className = "show"; //Apply a css class which gives it the property display: inline; (this is the default display)  }else if(window.pageYOffset<270){    document.getElementById("top").className = "hide"; //Apply a css class which gives it the property display: none;  };}//Run the above function whenever the window scrollswindow.onscroll=testScroll();

In stead of windows.pageYOffset one would better use document.documentElement.scrollTop || document.body.scrollTop. The first is not supported by IE<9.

Edited March 18, 2013 by Frank P

[Frank P]

To get your complicated questions answered or requirements met get in touch with our expert PHP developers.

Who do you mean with 'our expert PHP developers', this being your first post?? And why refer to PHP developers anyway, if PHP cannot even make something like this??