Question

How can I achieve the top image and then fixed top nav bar effect of this website? Specifically, the way the top navigation bar scrolls over the top sliding image plugin, then becomes fixed.
http://www.creuna.se/

Answer 1

Here is the sample and link how can you achieve you may need a JQuery plugin to create such a header slider

http://cssglobe.com/lab/easyslider1.7/01.html

For sticking the Nav bar in the header after scroller past it:
Here is the simple code snippet and demo
HTML:

<div id="container">
    <div id="navwrap">NAV WRAP</div>
</div>

Javascript:

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); 
// set original position on load
$(window).scroll(fixDiv);

demo of the above at JsFiddle
http://jsfiddle.net/5ADzD/1/

Reference post: Sticking Div to Top After Scrolling Past it
Hope this was helpful.