Sticky Header for maxGOLDs #1 Theme

header.html

<!-- Header -->
		<header class="header" data-minimize-offset="80">
			<div class="upperHeader">
				<div class="container">
					<div class="row">
						<div class="col-xs-12 col-lg-6">
							<p>Welcome to maxGOLDs, <a href="#">Login</a> or <a href="#">Create a new account</a></p>
						</div>
						<div class="col-xs-12 col-lg-6">
							<ul class="pull-right inline text-right">
								<li><a href="#">My Account</a></li>
								<li><a href="#">Shopping Cart</a></li>
								<li><a href="#">Checkout</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div> <!-- end upperHeader -->
			<div class="middleHeader">
				<div class="container">
					<div class="middleContainer clearfix">
						<div class="col-xs-12 col-md-6 siteLogo pull-left">
							<h1>
								<a href="#">maxGOLDs
									<img src="http://cdn.maxgolds.com/wow/img/logo_whitetrans.png" class="img-responsive">
								</a>
							</h1>
						</div>
						<div class="col-xs-12 col-md-3 pull-right text-right">
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
									<i class="fa fa-eur"></i> <span class="caret"></span>
								</a>
								<ul class="dropdown-menu currency">
									<li><a href="#"><i class="fa fa-eur"></i></a></li>
									<li class="divider"></li>
									<li><a href="#"><i class="fa fa-usd"></i></a></li>
								</ul>
							</div>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
									EN <span class="caret"></span>
								</a>
								<ul class="dropdown-menu language">
									<li><a href="#">FR</a></li>
									<li class="divider"></li>
									<li><a href="#">CH</a></li>
									<li class="divider"></li>
									<li><a href="#">AR</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div><!-- end middleHeader -->

			<div class="mainNav">
				<div class="container">
					<form class="quick-search" action="#" style="display:none;">
						<input type="text" name="query" placeholder="Type to search..." value class="form-control" autocomplete="off">
						<span class="link"><i class="fa fa-times"></i></span>
					</form>
					<nav class="navbar">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
							<li><a href="#">Game Gold</a></li>
							<li><a href="#">Games</a></li>
						</ul>
					</nav>
					<nav class="navbar navbar-right">
						<ul class="nav navbar-nav">
							<li class="search-toggler-wrapper">
								<a href="#" class="search-toggler">
									<i class="fa fa-search"></i>
								</a>
							</li>
							<li class="cart-toggler-wrapper">
								<a href="#" class="cart-toggler">
									<i class="fa fa-shopping-cart"></i>
									<span class="cart-number">0</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</header>

stickyHeader.js

var StickyHeader = function() {
        var offset = $('.upperHeader').outerHeight() + $('.middleHeader').outerHeight();
        var _handleHeaderOnScroll = function () {
            if ($(window).scrollTop() > offset) {
                $('.mainNav').addClass('sticky');
                var headerOffset = $('.mainNav').outerHeight() + 10;
                $('.wrapper').css('margin-top', headerOffset);
            } else {
                $('.mainNav').removeClass('sticky');
                $('.wrapper').css('margin-top', '');
            }
        }

        return {
            init: function() {

                $(window).scroll(function(){
                    _handleHeaderOnScroll();
                });
            }
        };
    }();
    
    $(function(){ StickyHeader.init(); });

changedfrom Hight() to outerHeight()