JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="header_top" style="top: 0px; opacity: 1;">
<div class="header">
<div class="header-container"> <a href="http://papermashup.com/" onclick="_gaq.push(['_trackEvent', 'Main Header', 'Click', 'Main Logo - Home']);" name="logo click" class="logo" style="display: inline;"><img src="http://papermashup.com/wp-content/themes/blankSlate3.0/images/logo.png" width="296" height="83"></a>
<div class="social" style="display: block;"><a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom" onclick="_gaq.push(['_trackEvent', 'Top Right Nav', 'Click', 'RSS Subscribe Popup']);">RSS</a> | <a href="http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&amp;loc=en_US" class="subscribe_popup">Subscribe by email</a> | <a href="http://papermashup.com/wp-content/themes/arthemia/contact.php" class="contact_popup" onclick="_gaq.push(['_trackEvent', 'Top Right Nav', 'Click', 'Contact Popup']);">Contact</a></div>
  <div id="nav_top" style="padding-top: 0px;">
  <div class="second_logo" style="display: block; width: 0px; overflow: hidden;"><a href="http://papermashup.com/" name="logo click" onclick="_gaq.push(['_trackEvent', 'Scroll Header', 'Click', 'Secondary Logo - Home']);"><img src="http://papermashup.com/wp-content/themes/blankSlate3.0/images/secondary_logo.png" width="52" height="52" style="display: none;"></a></div>
<div id="navbar" class="clearfloat">
<ul class="sf-menu">
  <li class="current"><a href="http://papermashup.com" onclick="_gaq.push(['_trackEvent', 'Main Nav', 'Click', 'Home']);">Home</a> </li>
  <li class="current "> <a href="http://papermashup.com/category/popular/" onclick="_gaq.push(['_trackEvent', 'Main Nav', 'Click', 'Popular']);">Popular</a> </li>
  <li class="current "> <a href="http://papermashup.com/category/php/" onclick="_gaq.push(['_trackEvent', 'Main Nav', 'Click', 'PHP']);">PHP</a></li>
  <li class="current "> <a href="http://papermashup.com/category/jquery/" onclick="_gaq.push(['_trackEvent', 'Main Nav', 'Click',...

CSS

body { min-height:900px;}
.header_top{ top:0; position:fixed!important; margin:0 auto; width:100%; z-index:1000;}
.container{top:150px; position:relative!important;}	
.second_logo{display:none; width:0px; height:52px; float:left; margin-top:-10px; margin-right:5px;}
.second_logo img{display:none;}		
.next_prev_nav{width:255px; display:none; float:right; margin-right:271px; margin-top:0px;}
.header{
margin:0 auto;
width:1110px;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.header-container{
	width:1090px;
	position:relative!important;
margin:0 auto;
	}

JavaScript

// Header Show/Hide
 	$(window).scroll( function() {
		var scrollVal = $(this).scrollTop();
		if ( scrollVal > 40 ){
			$('.header_top').stop().animate({
				top: '-62',
				opacity: 1
			  }, 100, function() {
				// Animation complete.
				$('.second_logo').show().stop().animate({
				width: '52'
			  }, 100, function() {
				$('.second_logo img').fadeIn(100);
			  });
				
			  });
			$('.logo, .social').hide();
			$('#nav_top').css('padding-top', '78px');
			$('.scroll_top, .next_prev_nav').fadeIn(500);		
			 
		}else{
			$('.header_top').stop().animate({
				top: '0',
				opacity: 1
			  }, 100, function() {
				// Animation complete.
			  });
			  
			$('.logo, .social').show(); 
			$('.scroll_top, .next_prev_nav').fadeOut(50); 
			$('#nav_top').css('padding-top', '0px'); 
			
			$('.second_logo img').css('display','none');	
			$('.second_logo').stop().animate({
				width: '0'		
			  });
		}
		
		if ( scrollVal > 40 ){
		$(".header_top").hover(function() {
			$('.header_top').stop().animate({
				opacity: 1
			  });
		}, function () {
			$('.header_top').stop().animate({
				opacity: 1
			  })
		});	
		}
	});

	$('.scroll_top').click(function(){
	$('html, body').animate({
	scrollTop: $("body").offset().top}, 700);
	});

// end dom ready
});