javascript - change - remove css jquery
Cambiar la posición de inicio predeterminada de#anchor (6)
Tengo una URL con un anclaje que funciona como debería:
site.com/item/id#comment-233
Cuando se abre, el anclaje se colocará exactamente en la parte superior de la página.
¿Cómo cambio el punto de partida? Digamos que quiero que sea 50px hacia abajo desde la parte superior.
La razón por la que necesito esto es porque tengo capas fijas en la parte superior de la página, por lo que el comentario aparece superpuesto detrás del div encabezado fijo.
Por las dudas, debido al cumplimiento de varios navegadores, prefiero una solución que no implique cambiar el contenedor del comentario a la parte superior fija y de posicionamiento menos la altura del encabezado.
Añadiendo "display: block;" funcionó para mí:
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-50px;
display: block;
}
Así que combiné algunas de las ideas aquí y se me ocurrió una que funciona bien para mí y para todos los navegadores. Las anclas vacías no parecen funcionar bien con los navegadores webkit, definitivamente no funcionan en Chrome. Agregar un pseudo elemento al ancla soluciona esto sin interrumpir los diseños.
a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
content:"";
float: left;
height: 0px;
}
Simplemente reemplace $offsetHeight con lo que necesite.
Este código funciona en Firefox, Chrome, IE y probablemente también en otros:
<a id="comment-3" class="shifted_anchor"> </a>
<div>
... comment ...
</div>
Donde esta es la hoja de estilo:
a.shifted_anchor {
position: relative;
top: -35px;
margin: 0;
padding: 0;
float: left;
}
La clave es el atributo float : lo usamos para evitar el espacio vertical extra causado por , que a su vez es necesario para la compatibilidad entre navegadores.
Esto funcionó para mí, basado en la sugerencia anterior:
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-30px; /* or whatever value you need */
}
Suponiendo que su etiqueta <a> no tiene contenido, agregue una clase a la etiqueta con una position:relative; top:-50px; position:relative; top:-50px;
Dependiendo de su documento, usted también debe envolverlo en un <div> absoluto
Esto debería ser compatible con varios navegadores si se implementa correctamente.
EDITAR
Esta es la prueba que hice localmente y funciona bien en FF 3.6
<html>
<body style=''margin:0; padding:0;''>
<div style=''position:fixed; height:50px; background-color:#F00; width:100%''>
Fixed header
</div>
<div style=''padding-top:50px''>
<div style=''height:100px; margin-top:10px; background-color:#0F0''><a href=''#linkhere''>Go to anchor</a></div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>
<a name=''linkhere'' style=''position:relative; top:-75px;''></a>
Link here</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
<div style=''height:100px; margin-top:10px; background-color:#0F0''>Blah</div>
</div>
</body>
</html>
.anchor{
display: block;
height: 115px; <!--same height as header-->
margin-top: -115px; <!--same height as header-->
visibility: hidden;
}
<span class="anchor"></span>
<div>content...</div>
de http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/