html - How to make this hovering navigation bar -

html - How to make this hovering navigation bar -

so i've saw website: http://unfold.no/ , want larn how build navigation bar both transparent , can alter color function of background (if scroll or downwards you'll see it) . have limited experience navigation bars dates old dreamweaver versions, forgive me generality of question... advise of start appreciated.

i guess issue can solved reading reply on question:

changing classes animation depending on scroll position

basically, in illustration showing, menu has position: absolute on page, positions on top right corner of page. then, easy way of changing color of menu swapping classes on menu through javascript. can utilize code shown on link above see how done.

by swapping classes regarding element colors animation, give each element css transition this:

.object{ -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }

this css create elements alter color fading animation duration of 0.5 seconds.

it pretty simple if know have basic understanding of css , javascript

html html5 navigation navigationbar