1

Bueno, tengo esta web en la que puse un header que se encoje al bajar en la pagina, pero tengo el problema de que cuando baja gran parte del contenido de la web sube por debajo del header y no se que poner para evitar eso sin que cambie también en su estado normal. Y e intentado poner margenes o padding pero el contenido también cambia de posición en el estado normal

$(document).ready(function(){
 
	$(window).scroll(function(){
		if( $(this).scrollTop() > 0 ){
			$('header').addClass('header2');
		} else {
			$('header').removeClass('header2');
		}
	});

});
@charset "utf-8";
body {
	/*propiedades del cuerpo*/
	margin: 0;
	padding: 0;
	font-family: 'Imprima', sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
}
#logo1 {
	/*posicion logo 1*/
	position: absolute; top: 15px; right: 15px;
}
#logo2 {
	/*posicion logo 1*/
	position: absolute; top: 15px; right: 100px;
}


header {
	/*propiedades del header*/
	background: #333;
	overflow: hidden;
	width: 100%;
}

.whrapper {
	/*espaciado margen general*/
	width: 50%;
	max-width: 50%;
	margin: 25px;
	overflow: hidden;
}

#logo-header {
	/*Propiedades generales del titulo y descripcion de la pagina*/
	position: static;
	margin-top: -10px
}

#logo-header .nombre-pagina {
	/*propiedades del titulo de la pagina*/
	/*Texto: HABITACION DINAMICA*/
	display: block;
	font-weight: 800;
	font-size: 1.2em;
	color: white;
	}
	
#logo-header .descripcion-pagina {
	/*propiedades de la descripcion de la pagina*/
	/*Texto: Controlador*/
	display: block;
	font-weight: 350;
	font-size: 0.8em;
	color: #999; 
}

header nav {
	/*propiedades de la barra de navegacion*/
	float: left;
	margin-left: 15px;
	margin-top: -20px;
	margin-bottom: 10px;
}

header nav a {
	/*propiedades de los botones de navegacion*/
	display: inline-block;
	color: white;
	text-decoration: none;
	padding: 6px 10px;
	line-height: normal;
	font-size: 12px;
	border-radius: 8px;
	transition: color 0.1s linear 0.1s;

}

header nav a:hover {
	color: #f2a643;
	background: #4c4c4c;
}

/*
EMPIEZA HEADER 2
*/

.header2 {
	position: fixed;
	height: 75px;
}

.header2 nav {
    float: right;
	margin-right: 15px;
	margin-top: -65px;
}

.header2 nav a {
	transition: color 0.1s linear 0.1s;
}

/*
TERMINA HEADER 2
*/
	
/*
EMPIEZA AREA DE CONTENIDO
*/

.contenido center {
}

a{
  	text-decoration: none;
	text-align: center;
}

.contenido .tabla-contenido table {
	position: static;
	margin-top: 30px;
	color: black;
	font-size: 15px;
	border-radius: 8px;
}
.contenido .tabla-contenido table p:before {
	content: "APAGADO";
	color: #c1877a;
}
.contenido .tabla-contenido table p:hover:before {
	content: "ENCENDER";
	color: #f4d742;
	transition: color 0.1s linear 0.1s;
}

.contenido .tabla-contenido table p.pulsado:before{
  	content: "ENCENDIDO";
  	color: #42f462;
	transition: color 0.1s linear 0.1s;
}

/*
TERMINA AREA DE CONTENIDO
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Habitacion Dinamica</title>

	<link href="Pagina2.css" rel="stylesheet" type="text/css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="header.js"></script>
	<script src="texto.js"></script>
	
	
	<link href="https://fonts.googleapis.com/css?family=Imprima" rel="stylesheet">
	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<div id="logo1">
		<img src="Escudo50.jpg" width="85px" height="70px"/>
    </div>
    <div id="logo2">
    	<img src="PacMan.png" width="70px" height="70px"/>
	</div>
	
</head>
<body>

			<header>
				<div id="logo-header">
			<div class="whrapper">
					<span class="nombre-pagina">HABITACION DINAMICA</span>
					<span class="descripcion-pagina">Controlador</span>
			</div>
			<nav>
				<a href="tal">CONTROLADOR</a>
				<a href="tal">ACERCA DE</a>
			</nav>
				</div>
			
	</header>
	
<section class="contenido">

	<center>
	<br>
		<font color="#0D7619"><h2><center><a name="habitacion">HABITACIÓN</a></center></h2></font>
	<br>
	<img src="MapaEjemplo.png">
	</center>
	
		<div class="tabla-contenido">
		 	<center>
	   			<table>
					<tr>
						<td>APARATO</td>
					 	<td>ENCENDIDO/APAGADO</td>
					</tr>
					<tr>
						<td>LAMPARA</td>
						<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
						<td>LUCES</td>
						<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
						<td>TV</td>
						<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
					    <td>VENTILADOR</td>
					    <td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
						<td>EQUIPO DE SONIDO</td>
					 	<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
	   			</table>
			</center>
    	</div>
		
<br>
<br>
		</section>
	
</body>
</html>

3
  • Yo no veo cual es el problema. Lo veo que funciona bien Commented el 15 ago. 2017 a las 17:09
  • No tenías enlazada la librería jQuery
    – user7176
    Commented el 15 ago. 2017 a las 17:09
  • El único problema que tengo ahí es que la por ejemplo, la palabra "habitación" se mete debajo del header encogido, y no se como evitarlo sin afectar al contenido con el header grande.
    – eldervl
    Commented el 15 ago. 2017 a las 17:12

1 respuesta 1

1

Cuando añades la clase header2 cambias la posición a fixed y el contenido ocupa el espacio donde antes estaba la cabecera. Para separar el contenido los 75 píxeles que tiene la cabecera reducida puedes usar un selector de hermanos adyacentes y así solo lo aplicará cuando exista la clase header2 (.header2 + contenido):

$(document).ready(function(){
 
	$(window).scroll(function(){
		if( $(this).scrollTop() > 0 ){
			$('header').addClass('header2');
		} else {
			$('header').removeClass('header2');
		}
	});

});
@charset "utf-8";
body {
	/*propiedades del cuerpo*/
	margin: 0;
	padding: 0;
	font-family: 'Imprima', sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
}
#logo1 {
	/*posicion logo 1*/
	position: absolute; top: 15px; right: 15px;
}
#logo2 {
	/*posicion logo 1*/
	position: absolute; top: 15px; right: 100px;
}


header {
	/*propiedades del header*/
	background: #333;
	overflow: hidden;
	width: 100%;
}

.whrapper {
	/*espaciado margen general*/
	width: 50%;
	max-width: 50%;
	margin: 25px;
	overflow: hidden;
}

#logo-header {
	/*Propiedades generales del titulo y descripcion de la pagina*/
	position: static;
	margin-top: -10px
}

#logo-header .nombre-pagina {
	/*propiedades del titulo de la pagina*/
	/*Texto: HABITACION DINAMICA*/
	display: block;
	font-weight: 800;
	font-size: 1.2em;
	color: white;
	}
	
#logo-header .descripcion-pagina {
	/*propiedades de la descripcion de la pagina*/
	/*Texto: Controlador*/
	display: block;
	font-weight: 350;
	font-size: 0.8em;
	color: #999; 
}

header nav {
	/*propiedades de la barra de navegacion*/
	float: left;
	margin-left: 15px;
	margin-top: -20px;
	margin-bottom: 10px;
}

header nav a {
	/*propiedades de los botones de navegacion*/
	display: inline-block;
	color: white;
	text-decoration: none;
	padding: 6px 10px;
	line-height: normal;
	font-size: 12px;
	border-radius: 8px;
	transition: color 0.1s linear 0.1s;

}

header nav a:hover {
	color: #f2a643;
	background: #4c4c4c;
}

/*
EMPIEZA HEADER 2
*/

.header2 {
	position: fixed;
	height: 75px;
}

.header2 nav {
    float: right;
	margin-right: 15px;
	margin-top: -65px;
}

.header2 nav a {
	transition: color 0.1s linear 0.1s;
}

/*
TERMINA HEADER 2
*/
	
/*
EMPIEZA AREA DE CONTENIDO
*/

.contenido center {
}

a{
  	text-decoration: none;
	text-align: center;
}
.header2 + .contenido{
    padding-top: 75px;
}
.contenido .tabla-contenido table {
	position: static;
	margin-top: 30px;
	color: black;
	font-size: 15px;
	border-radius: 8px;
}
.contenido .tabla-contenido table p:before {
	content: "APAGADO";
	color: #c1877a;
}
.contenido .tabla-contenido table p:hover:before {
	content: "ENCENDER";
	color: #f4d742;
	transition: color 0.1s linear 0.1s;
}

.contenido .tabla-contenido table p.pulsado:before{
  	content: "ENCENDIDO";
  	color: #42f462;
	transition: color 0.1s linear 0.1s;
}

/*
TERMINA AREA DE CONTENIDO
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Habitacion Dinamica</title>

	<link href="Pagina2.css" rel="stylesheet" type="text/css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="header.js"></script>
	<script src="texto.js"></script>
	
	
	<link href="https://fonts.googleapis.com/css?family=Imprima" rel="stylesheet">
	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<div id="logo1">
		<img src="Escudo50.jpg" width="85px" height="70px"/>
    </div>
    <div id="logo2">
    	<img src="PacMan.png" width="70px" height="70px"/>
	</div>
	
</head>
<body>

			<header>
				<div id="logo-header">
			<div class="whrapper">
					<span class="nombre-pagina">HABITACION DINAMICA</span>
					<span class="descripcion-pagina">Controlador</span>
			</div>
			<nav>
				<a href="tal">CONTROLADOR</a>
				<a href="tal">ACERCA DE</a>
			</nav>
				</div>
			
	</header>
	
<section class="contenido">

	<center>
	<br>
		<font color="#0D7619"><h2><center><a name="habitacion">HABITACIÓN</a></center></h2></font>
	<br>
	<img src="MapaEjemplo.png">
	</center>
	
		<div class="tabla-contenido">
		 	<center>
	   			<table>
					<tr>
						<td>APARATO</td>
					 	<td>ENCENDIDO/APAGADO</td>
					</tr>
					<tr>
						<td>LAMPARA</td>
						<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
						<td>LUCES</td>
						<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
						<td>TV</td>
						<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
					    <td>VENTILADOR</td>
					    <td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
					<tr>
						<td>EQUIPO DE SONIDO</td>
					 	<td><a href="#"><p class="APAGADO"></p></a></td>
					</tr>
	   			</table>
			</center>
    	</div>
		
<br>
<br>
		</section>
	
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.