Изменение непрозрачности элемента при прокрутке по точке

Question

Так что я хочу, чтобы мой #header (который имеет фиксированную позицию) менял свою непрозрачность до 0,5, когда пользователь на высоте 400 пикселей на странице, например. Если это до 400 пикселей, а мышь превышает #header - измените прозрачность на 1.

Заранее благодарим!

Answer 1

#header:hover { opacity:1; } //CSS for mouse over #header 

// javascript 
var head = document.getElementById("header"); 
if (document.body.scrollTop > 400) 
    head.setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)"); 
else 
    head.setAttribute("style","opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");