JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<header>
    <nav id="navbar">
        <img src="resources/img/onlinelogomaker-051519-2011-4086.png" class="mainlogo">
        <ul class="main-nav" id="js--main-nav">
            <li><a href="#">Main Page</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">Offer</a></li>
            <li><a href="#">About us</a></li>

        </ul>
        <a href="javascript:void(0);" class="mobile-nav-icon" onclick="myFunction2()">
            <ion-icon name="menu"></ion-icon>
        </a>

    </nav>

    <div class="main-header">
            <h1>Get up and let's go to the new natural world</h1>
            <a class="btn btn-join" href="#">Join me!</a>
            <a class="btn btn-read" href="#">Read more</a>
        </div>
</header>

CSS

body{ height:2000px;}
.main-nav {
    float: right;
    margin: 25px 15px;
    list-style: none;
    overflow: hidden;
}

.main-nav li {

    display: inline-block;
    margin: 30px;

}

.main-nav li a:link,
.main-nav li a:visited {
    color: #ffffff;
    padding-bottom: 10px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;


}

.main-nav li a:hover,
.main-nav li a:active {
    color: #fbf9ee;
    border-bottom: 3px solid #c47519;

}

/* Nav responsive */


/*Sticky navi*/

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 13px #dedede;
    z-index: 9999;

}

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    padding: 15px 0;
    color: #555;

}

JavaScript

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}