JSFiddle - React, Tailwind, and code Playground

by Chandan D Nadig

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
    <div class="col-xs-9">
<div class="row-fluid clearfix stick">
    <div class="col-xs-4 media pull-left sticky-name"> <a class="media-left media-middle" href="#">
                        <img class="media-object" src="http://placehold.it/35x35">
                    </a>

        <div class="media-body media-middle"> <a class="name" href="#">Username</a> 
        </div>
    </div>
    <ul class="nav nav-tabs clearfix">
        <li role="presentation" class="active pull-left"> <a href="#">Navigation 1</a>

        </li>
        <li role="presentation" class="pull-left"> <a href="#">Navigation 2</a>

        </li>
        <li role="presentation" class="pull-left"> <a href="#">Navigation 3</a>

        </li>
        <li role="presentation" class="pull-right">
            <p class="pencil"> <i class="glyphicon glyphicon-pencil fa-stack-1x fa-inverse fab-secondary"></i>

            </p>
        </li>
    </ul>
</div>
        </div>
    </body>

CSS

.name {
        font-size: 15px;
        font-weight: 700;
    }
    .pencil {
        padding: 8px;
    }
    .sticky-name {
        opacity: 0;
        width: 0;
        display: none;
        padding-top: 3px;
        padding-bottom: 3px;
        -webkit-transition: all 600ms ease-in-out;
        -moz-transition: all 600ms ease-in-out;
        -o-transition: all 600ms ease-in-out;
        transition: all 600ms ease-in-out;
    }
    .stick-top {
        z-index: 250;
    width: 100%;
        position: fixed;
        display: block;
    background: #FFFFFF;
    margin-bottom: 15px;
    -webkit-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

JavaScript

$(document).ready(function () {
    
        $(window).scroll(function () {
            if ($(window).scrollTop() >= 150) {
                $('stick').addClass("stick-top");
                $('.sticky-name').css({
                    'display': 'block'
                }).animate({
                    width: "100%",
                    opacity: 1
                }, 500, "linear", function () {
                    $('.sticky-name').css({
                        'opacity': 1
                    });
                });
            } else {
                $('stick').removeClass("stick-top");
                $('.sticky-name').css({
                    'opacity': 0;
                    'width': 0
                });
            }
        });