JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<nav>
    <ul class="inline-list main-links">
        <li class="linkitem"><a href="#">About</a>
        </li>
        <li class="linkitem"><a href="#">Work</a>
        </li>
        <li class="linkitem"><a href="http://www.paynecocraft.com/store">Store</a> 
        </li>
        <li class="circlearrow"><a id="changeonscroll" href="#scrolldown"></a>
        </li>
        <li class="linkitem"><a href="#">Plans</a>
        </li>
        <li class="linkitem"><a href="#">Contact</a>
        </li>
        <li class="linkitem"><a href="#">Blog</a>
        </li>
    </ul>
</nav>

JavaScript

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var navHeight = $(window).height() - 80;
        if ($(window).scrollTop() > navHeight) {
            $("#changeonscroll").text('Hello World').attr('href', 'http://www.paynecocraft.com');
        }
    });
});