PDA

View Full Version : Display div once you scroll down the page...challenge?



mikemiketm09
21 Mar 2011, 11:10 PM
Is this a challenge. What I need to do is have a sidebar that is fixed while scrolling the page. But I need this sidebar to fade in once you scroll so far into the page and fade away when you scroll back to the top. Is this possible? All help appreciated!:)

awniyya1
04 Apr 2011, 02:52 AM
Hello Friend,
define a function on the mouse scroll event like this below
window.onload = function()
{
//adding the event listerner for Mozilla
if(window.addEventListener)
document.addEventListener('DOMMouseScroll', moveObject, false);

//for IE/OPERA etc
document.onmousewheel = moveObject;
}

Then in that function you have to check the position of the scroll bar if it exceeds the actual page size you have to reduce the opacity for the div and if it moves towards the actual page height increase the opacity of the div.

This info would help you solve your challenge.


Ahamed