¿Cómo haría para evitar que mi header se desplace con el resto de la página? Pensé en utilizar frame-sets y iframes, solo preguntándome si existe una manera más fácil y amigable para el usuario, ¿cuál sería la mejor práctica para hacer esto?¿Cómo mantener el encabezado estático, siempre en la parte superior mientras se desplaza?
Uso position: fixed en el div que contiene su cabecera, con algo como
#header {
position: fixed;
}
#content {
margin-top: 100px;
}
En este ejemplo, cuando #content comienza 100px continuación #header, sino que el usuario se desplaza, #header permanece en su lugar. Por supuesto, no hace falta decir que debe asegurarse de que #header tenga un fondo para que su contenido se vea realmente cuando se solapen los dos div. Eche un vistazo a la propiedad position aquí: http://reference.sitepoint.com/css/position
dependiendo de la relación entre sus 'div's, es posible que deba agregar' margin-top: -100px; 'al' # header' para obtener vuelve donde lo quieres. – rymo
¿Conoces una manera de dejar que se desplace hasta que llegue a la parte superior y luego a "posición: fija"? Si su encabezado comenzó debajo de la parte superior? –
No está contenido dentro del ancho DIV para mí. – SearchForKnowledge
aquí está una con la solución css + jquery (javascript).
aquí es enlace de demostración Demo
//html
<div id="uberbar">
<a href="#top">Top of Page</a>
<a href="#bottom">Bottom of Page</a>
</div>
//css
#uberbar {
border-bottom:1px solid #eb7429;
background:#fc9453;
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
//jquery
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add events
topbarML();
$('#uberbar').bind('mouseenter',topbarME);
$('#uberbar').bind('mouseleave',topbarML);
inside = true;
}
else if (position < topDistance){
topbarME();
$('#uberbar').unbind('mouseenter',topbarME);
$('#uberbar').unbind('mouseleave',topbarML);
inside = false;
}
});
})();
});
Aquí es el DEMO
HTML:
<div class="header">
<h1 class="header__content-text">
Header content will come here
</h1>
</div>
<div class="page__content-container">
<div>
<a href="http://imgur.com/k9hz3">
<img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" />
</a>
</div>
<div>
<a href="http://imgur.com/TXuFQ">
<img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" />
</a>
</div>
</div>
CSS:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 48px;
z-index: 10;
background: #eeeeee;
-webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}
.header__content-text {
text-align: center;
padding: 15px 20px;
}
.page__content-container {
margin: 100px auto;
width: 975px;
padding: 30px;
}
I perso Finalmente necesitaba una mesa con los encabezados izquierdo y superior visibles en todo momento. Inspirado por varios artículos, creo que tengo una buena solución que puede ser útil. Esta versión no tiene el problema de envoltura que tienen otras soluciones con divisores flotantes o dimensionamiento flexible/automático de columnas y filas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
// Handler for scrolling events
function scrollFixedHeaderTable() {
var outerPanel = $("#_outerPanel");
var cloneLeft = $("#_cloneLeft");
var cloneTop = $("#_cloneTop");
cloneLeft.css({ 'margin-top': -outerPanel.scrollTop() });
cloneTop.css({ 'margin-left': -outerPanel.scrollLeft() });
}
function initFixedHeaderTable() {
var outerPanel = $("#_outerPanel");
var innerPanel = $("#_innerPanel");
var clonePanel = $("#_clonePanel");
var table = $("#_table");
// We will clone the table 2 times: For the top rowq and the left column.
var cloneLeft = $("#_cloneLeft");
var cloneTop = $("#_cloneTop");
var cloneTop = $("#_cloneTopLeft");
// Time to create the table clones
cloneLeft = table.clone();
cloneTop = table.clone();
cloneTopLeft = table.clone();
cloneLeft.attr('id', '_cloneLeft');
cloneTop.attr('id', '_cloneTop');
cloneTopLeft.attr('id', '_cloneTopLeft');
cloneLeft.css({
position: 'fixed',
'pointer-events': 'none',
top: outerPanel.offset().top,
'z-index': 1 // keep lower than top-left below
});
cloneTop.css({
position: 'fixed',
'pointer-events': 'none',
top: outerPanel.offset().top,
'z-index': 1 // keep lower than top-left below
});
cloneTopLeft.css({
position: 'fixed',
'pointer-events': 'none',
top: outerPanel.offset().top,
'z-index': 2 // higher z-index than the left and top to make the top-left header cell logical
});
// Add the controls to the control-tree
clonePanel.append(cloneLeft);
clonePanel.append(cloneTop);
clonePanel.append(cloneTopLeft);
// Keep all hidden: We will make the individual header cells visible in a moment
cloneLeft.css({ visibility: 'hidden' });
cloneTop.css({ visibility: 'hidden' });
cloneTopLeft.css({ visibility: 'hidden' });
// Make the lef column header cells visible in the left clone
$("#_cloneLeft td._hdr.__row").css({
visibility: 'visible',
});
// Make the top row header cells visible in the top clone
$("#_cloneTop td._hdr.__col").css({
visibility: 'visible',
});
// Make the top-left cell visible in the top-left clone
$("#_cloneTopLeft td._hdr.__col.__row").css({
visibility: 'visible',
});
// Clipping. First get the inner width/height by measuring it (normal innerWidth did not work for me)
var helperDiv = $('<div style="positions: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%;"></div>');
outerPanel.append(helperDiv);
var innerWidth = helperDiv.width();
var innerHeight = helperDiv.height();
helperDiv.remove(); // because we dont need it anymore, do we?
// Make sure all the panels are clipped, or the clones will extend beyond them
outerPanel.css({ clip: 'rect(0px,' + String(outerPanel.width()) + 'px,' + String(outerPanel.height()) + 'px,0px)' });
// Clone panel clipping to prevent the clones from covering the outerPanel's scrollbars (this is why we use a separate div for this)
clonePanel.css({ clip: 'rect(0px,' + String(innerWidth) + 'px,' + String(innerHeight) + 'px,0px)' });
// Subscribe the scrolling of the outer panel to our own handler function to move the clones as needed.
$("#_outerPanel").scroll(scrollFixedHeaderTable);
}
$(document).ready(function() {
initFixedHeaderTable();
});
</script>
<style type="text/css">
* {
clip: rect font-family: Arial;
font-size: 16px;
margin: 0;
padding: 0;
}
#_outerPanel {
margin: 0px;
padding: 0px;
position: absolute;
left: 50px;
top: 50px;
right: 50px;
bottom: 50px;
overflow: auto;
z-index: 1000;
}
#_innerPanel {
overflow: visible;
position: absolute;
}
#_clonePanel {
overflow: visible;
position: fixed;
}
table {
}
td {
white-space: nowrap;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 2px 2px 2px 2px;
}
td._hdr {
color: Blue;
font-weight: bold;
}
td._hdr.__row {
background-color: #eee;
border-left: 1px solid #000;
}
td._hdr.__col {
background-color: #ddd;
border-top: 1px solid #000;
}
</style>
</head>
<body>
<div id="_outerPanel">
<div id="_innerPanel">
<div id="_clonePanel"></div>
<table id="_table" border="0" cellpadding="0" cellspacing="0">
<thead id="_topHeader" style="background-color: White;">
<tr class="row">
<td class="_hdr __col __row">
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
<td class="_hdr __col">
TOP HEADER
</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="_hdr __row">
MY HEADER COLUMN:
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
</tr>
<tr class="row">
<td class="_hdr __row">
MY HEADER COLUMN:
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
<td class="col">
The quick brown fox jumps over the lazy dog.
</td>
</tr>
</tbody>
</table>
</div>
<div id="_bottomAnchor">
</div>
</div>
</body>
</html>
Si puede utilizar bootstrap3 entonces puede utilizar css "navbar-top fijo" También es necesario agregar más adelante css para empujar a su contenido de la página hacia abajo
body{
margin-top:100px;
}
En lugar de trabajar con el posicionamiento y relleno/margen y sin saber el tamaño del encabezado, hay una manera de mantener el encabezado fijo al jugar con el desplazamiento.
Véase el this plunker con una cabecera fija:
<html lang="en" style="height: 100%">
<body style="height: 100%">
<div style="height: 100%; overflow: hidden">
<div>Header</div>
<div style="height: 100%; overflow: scroll">Content - very long Content...
La clave aquí es una mezcla de height: 100% con overflow.
Consulte una pregunta específica sobre la eliminación del desplazamiento del encabezado here y responda here.
Una solución problemática. Parece que la parte inferior del contenido se coloca debajo de la ventana. Puedes verlo más claramente si haces que el encabezado sea más alto. Alguna idea de como resolver esto? –
Parece que funciona bien, pero el desplazamiento es muy lento en mi iPhone5. –
@AlainZelink - ¿Qué aplicación de navegador está usando en un iPhone5? –
Después de mirar a través de todas las respuestas, he encontrado una manera ligeramente diferente con CSS mínimo y sin JS, sólo la altura del encabezado se debe establecer correctamente en #content, en este caso 60px
CSS:
#header {
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
#content {
margin-top: 60px;
z-index:1;
}
HTML:
<body>
<div id="header" style="background-color:GRAY; text-align:center; border-bottom:1px SOLID BLACK; color:WHITE; line-height:50px; font-size:40px">
My Large Static Header
</div>
<div id="content">
<!-- All page content here -->
</div>
</body>
¿Qué quiere decir con 'header'? De una página? De una mesa? – BrunoLM
Relacionados: http://stackoverflow.com/q/33075195/435605 –