JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<ul class="ipsList_inline right" id="UserNavMenu" onmouseout="hideNavMenu();" style="opacity: 1; ">
    <li>
        <div id="ajax_loading" style="display: none; ">
            
        </div>
    </li>
    <li>
        <span class="services">A
                    </span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://gbatemp.net/index.php?app=core&module=global&section=login" title="Sign In" id="sign_in">Sign In</a>&nbsp;&nbsp;&nbsp;
    </li>
    <li>
        <a href="http://gbatemp.net/index.php?app=core&module=global&section=register" title="Create Account" id="register_link">Create Account</a>
    </li>                                
</ul>
<div id='xx'>A</div>

CSS

#UserNavMenu {
    padding-right: 15px;
    padding-left: 13px;
    background:#222;
    border-radius: 0 0 0 15px;
    -moz-border-radius: 0 0 0 15px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    position: fixed;
    margin: 0px auto;
}

#UserNavMenu:hover {
    opacity: 1 !important;
}

#xx {  
    border: 1px black solid;
    height: 3000px;
}

JavaScript

function showNavMenu() {
            document.getElementById("UserNavMenu").style.opacity = '1';
        }
        function hideNavMenu() {
            if (window.pageYOffset >= 50) document.getElementById("UserNavMenu").style.opacity = '0.2';
        }
        window.onscroll = function(e) {
            if (window.pageYOffset < 50) { showNavMenu(); } else { hideNavMenu(); }
        }