JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="nav-container">
        <nav class="mainMenu">
            <div class="onepcssgrid-1200">
                <div class="onerow">
                    <ul id="nav">
                        <li class="col3"><a href="#anchorhome" class="btn1">HOME</a></li>
                        <li class="col3"><a href="#anchorone" class="btn2">BIO</a></li>
                        <li class="col3"><a href="#anchortwo" class="btn3">GALLERY</a></li>
                        <li class="col3 last"><a href="#anchorthree" class="btn3">CONTACT</a></li>
                    </ul>
                    <div class="clearBoth"></div>
                </div>
            </div>
        </nav>
    </div>
<p>
DEMO
</p>
<p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p><p>
DEMO
</p>

CSS

.nav-container { position: absolute; width:100%; z-index:88; background: rgba(0, 0, 0, 0.4);  }
     ul#nav { margin:0; padding:0; }
    ul#nav li { list-style:none; text-align:center; padding:20px 0; float: left; width:25%; }
        ul#nav li a { color:#fff; font-size:14px; }

JavaScript

$(window).scroll(function () {

            var scroll = $(window).scrollTop();
            if (scroll >= 50) {
                $(".nav-container").animate({
                    top: scroll + 0
                }, 50);
            } else {
                $(".nav-container").animate({
                    top: '0px'
                }, 50);
            }
        });
        $(document).ready(function () {
            $('.nav-container').onePageNav({
                begin: function () {
                    console.log('start')
                },
                end: function () {
                    console.log('stop')
                }
            });
        });