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">
<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>

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;
}

JavaScript

$(document).ready(function(){

    $(window).scroll(function() {
        if ($(window).scrollTop() >= 150) {
            $('.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({'display': 'none';'opacity':0});
        }
    });