JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>

<header class="header">
		<nav>
			<ul>
				<a href="http://www.keyquotes.es"><li>Youtube</li></a>
				<a href="http://www.keyquotes.es"><li>Nosotros</li></a>
				<a href="http://www.keyquotes.es"><li>Contacto</li></a>
			</ul>
				
				<img id="logo" src="pictures/logo.png">

			<ul>
				<a href="http://www.keyquotes.es"><li>Youtube</li></a>
				<a href="http://www.keyquotes.es"><li>Nosotros</li></a>
				<a href="http://www.keyquotes.es"><li>Contacto</li></a>
			</ul>
		</nav>

</header>

<div id="fullpage">
	<div class="section " id="section0"><h1>fullPage.js</h1></div>
	<div class="section " id="section1"><h1>fullPdsadass</h1></div>
	<div class="section" id="section2"><h1>Lovely images <br />for a lovely page</h1></div>
	<div class="section" id="section3"><h1>One Image = One thousand words</h1>

	</div>
</div>

CSS

#body{
	width: 100%;
	height: 500px;

}/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	#section0,
	#section1,
	#section2,
	#section3{
		background-size: cover;
		background-attachment: fixed;
	}

	/* Defining each sectino background and styles
	* --------------------------------------- */
	#section0{
		background-image: url(imgs/fundo1.jpg);
	}
	#section0 h1{
		top: 50%;
		transform: translateY(-50%);
		position: relative;
	}
	#section1{
			background-image: url(imgs/fundo4.jpg);
		}
		#section1 h1{
			top: 50%;
			transform: translateY(-50%);
			position: relative;
		}
	#section2{
		background-image: url(imgs/fundo2.png);
		padding: 6% 0 0 0;
	}
	#section3{
		background-image: url(imgs/fundo4.jpg);
		padding: 6% 0 0 0;
	}
	#section3 h1{
		color: #000;
	}



.cnt
{
	height: 100px;
	background-color: orangered;
}

	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}

*{
	margin: 0;
	padding: 0;
	font-family: helvetica;
}



header{
	z-index: 333;
	position: fixed;
	width: 100%;
	height: 70px;
	background-color: transparent;
	-webkit-transition: background-color .5s;
}

nav{
	display: table;
	margin: auto;
	margin-top: 15px;
	height: 40px;
	-webkit-transition: margin-left .5s;
}

ul{
	display: block;
	float: left;
	list-style: none;
}

ul li{
	float: left;
	margin: 10px;
	padding: 2px;
}

ul a{
	color: #F3F3F3;
	text-decoration: none;
}

img#logo{
	
	float:left;
	display: block;
	width: 80px;
	height: 80px;

	-webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}

JavaScript

$(window).scroll(function(){
        scroll = $(window).scrollTop();
				console.log(scroll);
        if(scroll > 100){
                $("#logo").css({"margin-top": "-5px", "width": "50px","height":"50px"});
                $("nav ul a").css({"color": "blue"});                
                $("header").css({"background-color": "#fff"});
        }else{
                $("#logo").css({ "width": "80px","height":"80px"});
                $("nav ul a").css({"color": "#fff"});
                $("header").css({"background-color": "#000"});

        }


    });