JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="toper">
    <div class="ligner">
        <div class="logo"></div>
        <div class="ulmenu">
            <ul>
                <li>first</li>
                <li>second</li>
                <li>first</li>
                <li>second</li>
                <li>first</li>
                <li>second</li>
            </ul>
        </div>
    </div>
</div>

CSS

* {
      padding:0;
      margin:0;
  }
  body {
      height:2000px;
  }
  .toper {
      width:100%;
      display:table;
  }
  .ligner {
      display:table;
      width:960px;
      margin:0 auto;
      background:blue;
  }
  .logo {
      background:red;
      width:100px;
      height:60px;
  }
  .ulmenu {
      right:0;
      position:absolute;
      top:0;
  }
  .ulmenu ul {
      list-style:none;
      margin:10px 0;
  }
  .ulmenu ul li {
      color:white;
      float:left;
      line-height:40px;
      margin:0 15px;
  }
  .fx {
      position:fixed;
  }
  .fx ul li {
      color:black!Important;
  }

JavaScript

$(document).ready(function () {
    var mww = $("ul").outerWidth() / 2;
    $(window).scroll(function () {
        if ($(this).scrollTop() > 5) {
            $(".ulmenu").addClass("fx");
        } else {
            $(".ulmenu").removeClass("fx");
        }
    });
});