JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<div class="container">        
<div class="sHeader">
        <div class="line">
            &nbsp;
        </div>
        <div class="tabBox" id="logo1">
            <a href="./index.html"><img src="./img/f.png" id="logo" width="60" height="60"/></a>
        </div>
        <div class="line">
            &nbsp;
        </div>
        <div class="tabBox" id="tab1">
            <a href="./index.html">Home</a>
        </div>
        <div class="tabBox" id="tab2">
            <a href="http://www.twitter.com/">Twitter</a>
        </div>
        <div class="tabBox" id="tab3">
            <a href="./tzcraft/info.html">Info</a>
        </div>
        <div class="line">
            &nbsp;
        </div>
    </div>
</div>

CSS

.container {
    height: 1500px;
    overflow-y: scroll;
}

div.sHeader
{
height: 64px;
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(51,51,51,1)), color-stop(100%, rgba(51,51,51,0)));
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: -o-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: -ms-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#00333333', GradientType=0 );
width: 100%;
top:-64px;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
opacity:0;
position:fixed;
}

JavaScript

if (!!$('.sHeader').offset())
{
    var sHeadTop = $(".header").offset().top + 48;

    $(window).scroll(function()
    {
        var windowTop = $(window).scrollTop();
        var windowW = $(window).width();

        if (sHeadTop < windowTop)
        {
            $(".sHeader").css({position: 'fixed', opacity: 1, width: windowW});
        }
        else
        {
            $(".sHeader").css({position: "fixed", top: -64, opacity: 1, width: windowW});
        }
    });
}