JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="container">
     <h1>Logo</h1>

    <div id="menu">
        <ul>
            <li><a href="#">Link 1</a>
            </li>
            <li><a href="#">Link 2</a>
            </li>
            <li><a href="#">Link 3</a>
            </li>
            <li><a href="#">Link 4</a>
            </li>
            <li><a href="#">Link 5</a>
            </li>
            <li><a href="#">Link 6</a>
            </li>
        </ul>
    </div>
    <div id="main">
        <p>
             <h1>Scroll down to witness the effect</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat arcu, dapibus nec porttitor sed, dapibus eget tortor. Nullam pretium diam ligula. Praesent imperdiet viverra sagittis. Fusce cursus metus ac lacus scelerisque scelerisque. Nullam elementum commodo hendrerit. Nulla ultrices, nisl a congue semper, leo quam facilisis nunc, eu fermentum quam ligula ac ligula. Maecenas pulvinar nunc quis libero mattis egestas. Nam pulvinar augue nec libero fringilla eget ultricies nisi sodales. Praesent tincidunt sem nunc, non dapibus quam. Aenean eget ornare neque. Cras sit amet leo quis urna gravida venenatis. Pellentesque sollicitudin lorem nec nisl tempus ut faucibus metus auctor. Quisque sit amet orci vel nulla tincidunt tincidunt.</p>
        <p>Mauris in arcu a orci pharetra gravida ac in odio. Nulla facilisi. Nullam et mollis orci. Aenean velit dui, aliquam ut viverra ut, hendrerit id sem. Donec condimentum bibendum bibendum. Mauris feugiat diam ac quam consectetur eu rutrum mi vehicula. Duis cursus suscipit libero et posuere. Quisque convallis dictum tincidunt. Pellentesque in accumsan magna. Suspendisse potenti. Vestibulum ullamcorper metus sed leo rutrum cursus. Praesent lorem dolor, aliquet non tincidunt lacinia, tincidunt ac purus. Etiam sagittis vehicula leo sed adipiscing.</p>
        <p>Praesent vestibulum nibh eget diam ullamcorper aliquet. Vivamus congue felis eget neque tempor sollicitudin. Donec feugiat porttitor tortor at...

CSS

* {
    margin:0;
    padding:0;
}
body {
    font-family: Calibri, Arial, Verdana;
    font-size:0.95em;
    line-height:1.5em;
}
p {
    margin: 10px 0 15px;
}
#container {
    width: 960px;
    margin:0 auto;
}
h1 {
    font-family:'Cambria', Georgia;
    font-size:1.9em;
    padding: 30px 0 20px;
    line-height: 30px;
}
#menu {
    background: #333;
    height:35px;
}
#menu ul li {
    border-left: 1px solid #999;
    border-right: 1px solid #cacaca;
    float:left;
    font-weight: bold;
    line-height:35px;
    list-style: none;
    text-transform: uppercase;
}
#menu a {
    color: white;
    display:block;
    padding: 0 20px;
    text-decoration:none;
}
#menu a:hover {
    color:gray;
}
#menu.fixed {
    background: #777;
    position:fixed;
    left:0;
    top:0;
    width:100%;
}
#menu.fixed ul {
    display: block;
    margin: 0 auto;
    width:960px;
}
#menu.fixed+#main {
    margin-top:45px;
}

JavaScript

var $menu = $('#menu'), // replace #menu with your selector
    menuOffsetTop = $menu[0].offsetTop;

$(document).bind('ready scroll', function () {
    var docScroll = $(this).scrollTop();

    if (docScroll >= menuOffsetTop) {
        $menu.addClass('fixed');
    } else {
        $menu.removeClass('fixed');
    }
});