JSFiddle - React, Tailwind, and code Playground

by denzdii

HTML

<div id="float_menu">
    <div class="label">MENU</div>
    <div class="menu">
        <a href="#" class="menu_item">Title1</a>
        <a href="#" class="menu_item">Title2</a>
        <a href="#" class="menu_item">Title3</a>
        <a href="#" class="menu_item">Title4</a>
        <a href="#" class="menu_item">Title5</a>
        <a href="#" class="menu_item">Title6</a>
        <a href="#" class="menu_item">Title7</a>
        <a href="#" class="menu_item">title8</a>
    </div>
</div>
<div class="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque facilisis felis, ac convallis nibh porta et. Nullam sed enim in nunc dictum convallis eu in diam. In volutpat arcu sit amet risus consectetur sollicitudin volutpat ante iaculis. Nullam odio ipsum, fermentum vitae scelerisque sit amet, ornare eget velit. Suspendisse suscipit imperdiet nisl, vitae tempor lectus interdum vel. Integer eget lorem dolor, id tincidunt erat. Proin eget diam tellus. Ut posuere quam non sem iaculis convallis. Curabitur id diam neque, eget rhoncus magna. Praesent lorem mauris, luctus sed sagittis ut, imperdiet non metus. Suspendisse a lectus dolor, eu lacinia nisl.</p>

<p>Duis massa turpis, feugiat at rhoncus nec, blandit sed ipsum. Mauris mollis laoreet odio, sed malesuada lacus elementum sit amet. Donec vitae nulla quam, in lacinia nulla. Quisque odio ligula, fermentum consectetur laoreet fermentum, fringilla eget massa. Pellentesque in risus nibh. Praesent accumsan rhoncus mauris, feugiat elementum sem condimentum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam scelerisque scelerisque est a ultricies. Nulla nec dui vel diam accumsan convallis eu vitae lacus. Sed justo augue, consectetur aliquet dictum a, lobortis sed sapien. Aenean sem nulla, molestie quis tincidunt vitae, viverra non est. Praesent vitae sapien vestibulum dui dignissim hendrerit id eu risus. Maecenas condimentum...

CSS

body{background:#333;margin:0px; padding:0px;}
h1 {font:20px bold arial;color:#fff;}
p{background:#fff;border:1px solid #ccc;margin:10px 0; padding:10px;}
#float_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}
#float_menu .label{background-color:#000;color:#FFF;font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;letter-spacing:7px;line-height:20px;text-align:center;}
#float_menu .menu{display:none;}
#float_menu .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;}
#float_menu .menu a.menu_item:hover{background:#222; color:#fff;}
.content{width:520px; margin:50px auto;}

JavaScript

$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;
//cache vars
$fl_menu=$("#float_menu");
$fl_menu_menu=$("#float_menu .menu");
$fl_menu_label=$("#float_menu .label");

$(window).load(function() {
    menuPosition=$('#float_menu').position().top;
    FloatMenu();
    $fl_menu.hover(
        function(){ //mouse over
            $fl_menu_label.fadeTo($menu_fade_speed, 1);
            $fl_menu_menu.fadeIn($menu_fade_speed);
        },
        function(){ //mouse out
            $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
            $fl_menu_menu.fadeOut($menu_fade_speed);
        }
    );
});
$(window).scroll(function () { 
    FloatMenu();
});
function FloatMenu(){
    var scrollAmount=$(document).scrollTop();
    var newPosition=menuPosition+scrollAmount;
    if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
        $fl_menu.css("top",menuPosition);
    } else {
        $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
    }
}