JSFiddle - React, Tailwind, and code Playground

by yamidvo

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
        <div id="container">
        
             <div id="menu">
             
                  <ul>

                    <li><a href="#servicios">SERVICIOS</a></li>
                    <li><a href="#trabajo">TRABAJO</a></li>
                    <li><a href="#logo" class="logo"></a>&nbsp;</li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#contacto">CONTACTO</a></li>

                  </ul>
             
             </div> <!--menu-->

             <div id="inicio">
             
                  <div id="slider">

                    <div id="containerSlider">
                
                        
                
                    </div> <!--containerSlider-->

                </div><!--slider-->
             
             </div> <!--inicio-->

             
             <div id="servicios">

                <h2>Servicios</h2>

                <div class="contenido">
                
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                
                </div><!--contenido-->

                <div id="acordeonServicios">
             
                  
             
                </div> <!--acordeonServicios-->

             </div><!--servicios-->

             <div id="trabajo">

                <h2>Trabajo</h2>

                <div class="contenido">
                
                   ...

CSS

*{
	font-size: Arial;
}

body{
	background-color: #24607f;
	padding: 0;
	margin: 0;
}

#container{
	margin: 105px auto;
	width: 850px;
}

#menu{
	background-color: #fff;
	text-align: center;
	position: fixed;
	top: 0;
	width: 850px;

	-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
}

#menu ul{
	/*saca las viñetas del div*/
	margin: 0;
	padding: 0;
}

#menu ul li{
	/*eliminamos las viñetas y juntamos los enlaces*/
	list-style: none;
	display: inline-block;
	padding: 40px 10px;
	margin-left: -25px;
}

#menu ul li a{
	color: #000;
	font-size: 14px;
	font-weight: bold;
	padding: 40px 10px;
	text-decoration: none;
}

#menu ul li a:hover{
	background-color: #ff5105;
	color#fff;
}

.logo, .logo:hover{
	background: #ff5105 url(../img/logo1.png);
	background-repeat: no-repeat;
	background-position: center center;	
	padding-left: 71px !important;
	padding-right: 71px !important;
}

.logo2{
	background: #fff url(../img/logo.png);
	background-repeat: no-repeat;
	background-position: center center;	
	padding-left: 71px !important;
	padding-right: 71px !important;
}

.seleccionado{
	background-color: #ff5105;
	color: #fff !important;
}

#slider{
	background: url(../img/disney.jpg);
	height: 450px;
	margin-top: 10px;
	width: 100%;

	-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
	-o-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

h2{
	color: #a3e0ff;
	font-size: 28px;
	margin-bottom: 50px;
	margin-top: 50px;

	-webkit-text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
	-moz-text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
	-o-text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
	text-shadow: 1px 1px 7px rgba(0,0,0,0.5);
}

.contenido{
	background-color: #fff;
		-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
		-moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
		-o-box-shadow: 1px...

JavaScript

$(document).on("ready", main);

function main(){
	$("#menu a").on("click", irA);
	$(window).scroll(scrollMenu);
}

function irA(){
	var seccion = $(this).attr("href");
	$("body, html").animate({
		scrollTop: $(seccion).offset().top-130
	}, 800);

	return false;
}

function scrollMenu(){
	var secciones = [$("#inicio").offset().top,
						$("#servicios").offset().top,
						$("#trabajo").offset().top,
						$("#faq").offset().top,
						$("#contacto").offset().top,
						$("body").height()];

	if (($this).scrollTop() > secciones[0]-140 && ($this).scrollTop() < secciones[1]-140 ) {
		$("#menu a").eq(2).removeClass("logo2");
	}else{
		$("#menu a").eq(2).addClass("logo2");
	}
}