JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<header>HTML5 ELEMENTS</header>

<nav>
  <ul>      
      <li><a href="#" data-scroll="top">TOP</a></li>
        
      <li><a href="#" data-scroll="news">NEWS</a></li>
        
      <li><a href="#" data-scroll="products">PRODUCTS</a></li>
        
        <li><a href="#" data-scroll="contact">CONTACT</a></li>
  </ul>  
</nav>
<aside><p>content aside, content aside, content aside, content aside, content aside, content aside</p></aside> 
<div class="wrapper">
        
    <section id="top" data-anchor="top">
        
        <h4>TOP</h4>
        
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor tortor ut odio porttitor, eget pretium odio auctor. Aliquam posuere magna dolor, a imperdiet metus vestibulum a. Nunc porttitor venenatis velit vitae porta. Quisque quis turpis imperdiet, vestibulum augue non, tincidunt est. Suspendisse in nisi euismod, elementum orci et, ultrices neque. Pellentesque et sapien odio. Proin neque erat, pellentesque in pharetra quis, tempor vitae ligula. Nullam posuere odio felis, ac dapibus lectus aliquam quis. Vivamus ornare nisi nulla. Sed sit amet tincidunt purus. Phasellus vel sapien sed tellus congue hendrerit vitae sed felis. Aliquam rutrum, sapien ac interdum tempus, eros sapien feugiat nunc, a molestie massa enim non orci. Pellentesque convallis tincidunt imperdiet. Vestibulum eu lobortis purus. Nulla eget consectetur purus.</p>

            <p>Proin ut quam volutpat, faucibus lectus in, ultrices ante. Morbi sit amet odio sit amet felis consectetur rutrum. Duis porttitor vestibulum malesuada. Quisque sed sem facilisis, gravida diam nec, congue lacus. Aenean bibendum neque a aliquam commodo. Curabitur nec dignissim dui. Vivamus orci eros, sagittis at semper at, rhoncus eu velit. Integer et ultricies velit. Maecenas semper sem at arcu gravida, eget hendrerit magna viverra. Praesent risus arcu, pharetra vitae feugiat vitae, elementum vel augue. Nam commodo risus id ornare blandit. Donec...

CSS

body {
    padding: 0;
    margin: 0
}
aside{
    margin-top: 20px;
    float: right;
    margin-right: 20px;
    width: 150px;
    height: 300px;
    border-radius: 5px;
    background: black;
    color: white;
}

aside p{
    margin: 10px;
    
}

header {
    background: black;
    height: 100px;
    color: white;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding: 20px;
}

h4 {
   font-weight: bold;
    
}

p {
    margin: 20px 0;
    text-align: justify;
    line-height:150%;
    margin-right: 20px;
}

section {
    padding: 20px 0;
}

.wrapper {
    width: 600px;
    margin: 0 auto;
    position: relative;
    margin: 40px;
}

nav {
    position: absolute;
    top: 100px;
    background: black;
    display: block;
    width: 100%;
    padding: 4px 0;
    height: 30px;
    z-index: 100;
}

nav a {
    font-family: helvetica;
    color: #ffffff;
    padding: 2px; 4px;
    display: block;
    float: left;
    text-decoration: none;
    margin-right: 10px;
}

nav a:hover,
nav a.active {
    background: white;
    color: black;
}

.fixed {
    position: fixed;
    top: 0
}

JavaScript

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;

    $('body,html').animate({
        scrollTop: scrollPoint
    }, 500);

    return false;

})


$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 20) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });
        

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();