JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" class="fw">
    <div id="mobile-menu" class="menu">
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur</a></li>
            <li><a href="#">adipiscing elit</a></li>
            <li><a href="#">Integer nec odio</a></li>
        </ul>
        <div class="close menu">
            <ul>
                <li><a href="#" id="close-menu">close menu</a></li>
            </ul>
        </div>
    </div>
    <div id="menu-button">
        <p>Menu</p>
    </div>
    <div class="logo"> <img src="http://0.static.wix.com/media/a89e29_da70cf06f8a8efbd0f1cc6c55eef631f.png_128" /> </div>
    <div class="logo-type group"> <img src="http://img.sermonindex.net/pdf/smallheader.png" />
        <h6>Not <span id="logo-text">actual images</span></h6>
    </div>
 </div>
<ul class="desktop-menu" id="sticker">
    <li><a href="#">Lorem ipsum</a></li>
    <li><a href="#">dolor sit amet</a></li>
    <li><a href="#">consectetur</a></li>
    <li><a href="#">adipiscing elit</a></li>
    <li><a href="#">Integer nec odio</a></li>
</ul>
<div id="page" class="fw">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
        <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
        <p>Nulla metus...

CSS

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
  padding:0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in...

JavaScript

$(document).ready(function(){
		var el = $('#mobile-menu'),
			autoHeight = el.css('height', 'auto').height();
			el.height(0);
		$('#menu-button').click(function(){
			$('#mobile-menu').animate({'height':autoHeight},300),
			$('.close').animate({'height':'62px'},300);
		});
		$('#close-menu').click(function(){
			$('.menu').animate({'height':"0"},300)
		});
	
	});
	
	
	var stickerTop;
	var somethingelse;
	
	$(window).on("load resize", function(){
		
		stickerHeight = $('#sticker').height();
		stickerTop = parseInt($('#sticker').offset().top);
		somethingelse = parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top'));
	
		$(window).scroll(function(){
				
			if (somethingelse > stickerTop){
				$("#sticker").css({position:'fixed',top:'0px'});
				$(".logo").css({top:'3px', width:'127px', height: stickerHeight - 6});
				$(".logo img").css({float:'right'});
				$('#page').css('padding-top',stickerHeight + 20);
			}
			
			else {
				$("#sticker").css({position:'relative'});
				$(".logo").css({width: 'auto',height: 'auto', top: '17px'});
				$(".logo img").css({float:'none'});
				$('#page').css('padding-top','20px');
			}
			
		});
	
	});