How do I prevent the content of the page from going too high with the shrunken header?

Question

How do I prevent the content of the page from going too high with the shrunken header?

Navigation

#1 by (1 votes)

1

Well, I have this web where I put a header that shrinks when downloading on the page, but I have the problem that when a lot of the content of the web goes down, it goes up below the header and I do not know what to put in order to avoid that without changing also in its normal state. And I tried to put margins or padding but the content also changes position in the normal state

$(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>

javascript html css

asked by e2vl13 15.08.2017 в 18:55

source

1 answer

Modify CSS of the elements of an iframe using JavaScript How to save the variable, without changing the scope

score 1 · Accepted Answer

When you add the class header2 you change the position to fixed and the content occupies the space where the header was before. To separate the content of the 75 pixels that the reduced header has, you can use a selector of adjacent siblings and only apply it when the class header2 ( .header2 + contenido ) exists:

$(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>