Display div once you scroll down the page...challenge?

[mikemiketm09]

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]

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