JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Floating Menu -->
<!-- Include jQuery -->
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <script type="text/javascript" src="http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/assets/smoothscroll.js"></script>
  




    <!-- The header code, including the menu -->
    <div id="header">
        <div id="logo"><table width="103%"><tr><td align="left"></td></div>


        <div id="navWrap">
            <div id="nav">
                <ul>

<li><a href="javascript:window.scrollTo(0,0);" title="Home"><img src=" http://img17.imageshack.us/img17/1541/crystalclearappkfmhome.png " width="52" height="52" alt="Biography"></a></li>
<li><a class="smoothScroll" href="#1a" title="1a"><img src=" http://imageshack.us/a/img268/9426/crystalclearkuser2.png " width="52" height="52" alt="Biography"></a></li>

                </ul>    
                <br class="clearLeft" />
            </div>
        </div>
    </div>

<!-- End Floating Menu Code -->
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
    <br><a name="1a"></a> <u>linked Text #1</u>
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br> blocks of text
<br>...

CSS

<style type='text/css'>
/*
body {
   background-color: #333;  
   color: #999;
   font: 12px/1.4em Arial,sans-serif;
}
#wrap {
   margin: 10px auto;        
   background: #666;
   padding: 10px;
   width: 700px;
}
#header {
   background-color: #666;
   color: #FFF;
}
#logo {
   font-size: 30px;  
   line-height: 40px;    
   padding: 5px;
}
*/
#navWrap {
   height: 30px;
}
/*Background*/
#nav {
   padding: 5px;
background-color:rgba(7,7,7,0.7);
/*   background: transparent;    */
}
#nav ul {
   margin: 0;
   padding: 0;    
}
/*Menu Items*/
#nav li {
   float: left;
   padding: 3px 8px;
   background-color: #FFF;
   margin: 0 10px 0 0;
   color: #F00;
   list-style-type: none;
background-color: transparent;
}
/*
#nav li a {
   color: #F00;  
   text-decoration: none;    
}
#nav li a:hover {
   text-decoration: underline;   
}
*/
br.clearLeft {
   clear: left;        
}


  </style>

JavaScript

//<![CDATA[ 


$(function() {
    // Stick the #nav to the top of the window
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});



//]]>