RANGER Front-End Test - Pt. 2

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada magna orci, ut tempus elit placerat quis. Proin eu eleifend felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla commodo vehicula elit, nec viverra eros faucibus vitae. Phasellus porta metus sed luctus feugiat. Duis sed lectus arcu. Aliquam sit amet arcu tempor, fermentum turpis ut, accumsan quam. Nunc euismod ac metus id eleifend. Aliquam eleifend ornare vestibulum.</p>

<div class="navbar-container">
    <div class="navbar">
        <a href="">Link 1</a>
        <a href="">Link 2</a>
        <a href="">Link 3</a>
        <a href="">Link 4</a>
        <a href="">Link 5</a>
    </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada magna orci, ut tempus elit placerat quis. Proin eu eleifend felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla commodo vehicula elit, nec viverra eros faucibus vitae. Phasellus porta metus sed luctus feugiat. Duis sed lectus arcu. Aliquam sit amet arcu tempor, fermentum turpis ut, accumsan quam. Nunc euismod ac metus id eleifend. Aliquam eleifend ornare vestibulum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada magna orci, ut tempus elit placerat quis. Proin eu eleifend felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla commodo vehicula elit, nec viverra eros faucibus vitae. Phasellus porta metus sed luctus feugiat. Duis sed lectus arcu. Aliquam sit amet arcu tempor, fermentum turpis ut, accumsan quam. Nunc euismod ac metus id eleifend. Aliquam eleifend ornare vestibulum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada magna orci, ut tempus elit placerat quis. Proin eu eleifend felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla commodo vehicula elit, nec...

CSS

body {
    margin: 0;
}

p {
    padding: 20px 30px;
}

.navbar-container {
    height: 30px;
}
.navbar {
    background-color: #ccc;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
}

.docked { 
    position: fixed;
    top: 0;
}

JavaScript

/*
INSTRUCTIONS
Write a jQuery script that will set the ".navbar" to stay fixed to the top of the window when it reacges the top. When you scroll all the way to the top, it pops back into its original place.
*/

var navbar  = $('.navbar-container'), 
    docked  = false,
    nav_pos = navbar.offsetTop;

$(window).scroll(function () { 
    console.log('Nav: ' + nav_pos);
    console.log('Scrollbar: ' + document.documentElement.scrollTop);
});