html5 - change css when focus on div changes -

i don't know if possible. creating single page layout site, , on home section have menu

<nav>    <ul id="navigation">       <li><a href="#1" title="1">1</a></li>       <li><a href="#2" title="2">2</a></li>       <li><a href="#3" title="3">3</a></li>       <li><a href="#4" title="4">4</a></li>       <li><a href="#5" title="5">5</a></li>    </ul> </nav> 

this placed inside <section id="home"></section>.

is possible use different layout on menu if #home looses focus, i.e. section viewed, fx #3. in home section menu placed in bottom, want fixed top , change layout when user scrolls down or clicks link.

or have create menu, f.x. #menu-scroll ?

note focus (the link or control has :focus selector) not change when scroll section of document. handle that, consider using jquery "scroll" event:

$(window).scroll(function() {     if ($(window).scrolltop < $("#home").offset().top) {         $("#navigation").removeclass("scrolleddown").addclass("scrolledup");     } else {         $("#navigation").removeclass("scrolledup").addclass("scrolleddown");     } }); 

this can extended several sections. note scroll event fired lot, don't in handler.