JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dev.recyclingexperts.us/css/custom.css">
	<header id="header">
	    <nav class="main-header navbar navbar-default">
	        <div class="container">
	            <div class="navbar-header">
	                <button class="navbar-toggle btn btn-default" data-toggle="collapse" data-target="#yii_booster_collapse_yw2" id="yw3" name="yt1" type="button"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
	                </button><a href="/" class="navbar-brand"><div id="floating-logo"><img class="logo" src="http://dev.recyclingexperts.us/images/logo.png"></div></a>
	            </div>
	            <div class="collapse navbar-collapse" id="yii_booster_collapse_yw2">
	                <ul id="yw4" class="nav navbar-nav">
	                    <li class="active">	<a href="/rs/default/index">Home</a>
	                    </li>
	                    <li>	<a href="/rs/default/about">About</a>
	                    </li>
	                </ul>
	            </div>
	        </div>
	    </nav>
	</header>
	<div id="space">
	</div>

CSS

#space{ height: 2000px; }

#floating-logo {
    margin: -15px 50px 0 0;
    background-color: #FF9009;
    color: #FFF;

    width: 190px;
    text-align: center;
    padding: 0 7px;
}


header {
  position: fixed;
  width:100%;
}

JavaScript

$(document).scroll(function() {
    $('.logo').css({width: $(this).scrollTop() > 100? "50%":"100%"});
});