Change header on scroll

Transform header into a navigation bar

by Ciprian Dracea

HTML

<body>
<header id="header">
    <h2>The</h2>
    <h1>Catching Raindrops</h1>
</header>

    <nav id="nav">
        <div id="left-header">The Catching Raindrops</div>
        <ul class="menu">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Quotes</a></li>
        </ul>
    </nav>
    <div id="just-for-testing" style="height:1000px;">&nbsp;</div>
</body>

CSS

header {
    font-family:'Steelfish';
    color: #fff;
    margin: 10px 0 0 0;
    background:red;
}
header h1 {
    font-size: 90px;
    text-align: center;
    text-transform: uppercase;
}
header h2 {
    font-size: 40px;
    text-align: center;
    text-transform: uppercase
}
nav {
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    background:red;
}
nav ul {
    margin:0;
    padding: 0;
    list-style-type: none;
}
nav ul li {
    display: inline-block;
    padding: 0 10px 0 10px;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
}
nav ul li a:hover {
    text-decoration: none;
    color: #000;
    -webkit-transition: color 900ms ease;
    -moz-transition:color 900ms ease;
    -o-transition: color 900ms ease;
    transition: color 900ms ease;
}
.scroll-nav {z-index: 9999; position: fixed; left: 0; top: 0 !important; width: 100%;background:rgba(255,0,0,0.5);}
.scroll-nav ul.menu {float:right;}
#nav #left-header {float:left;font-size:80%;}
#nav #left-header a {background:none;}
#left-header {display:none;border:none;}
#left-header img {border:none !important;}

JavaScript

$j=jQuery.noConflict();
$j(document).ready(function() {    
    var nav = $j('#nav');
            $j('#left-header').hide();
    $j(window).scroll(function () {
        if ($j(this).scrollTop() > 150) {
            nav.addClass("scroll-nav");
$j('#header').hide();
$j('#left-header').show();
        } else {
            nav.removeClass("scroll-nav");
$j('#header').show();
$j('#left-header').hide();
        }
    });
});