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>