7
He encontrado este sitio web hoy http://www.forward-thinker.co.uk/. ¿Alguien sabe cómo hacer un encabezado tan pegajoso como este?Cabecera adhesiva CSS/JS
A
Respuesta
8
Ese sitio en particular utiliza jQuery's $(window).scrollevent. Comprueba si la parte superior del área desplazada ($(this).scrollTop();) está por debajo de cierta altura. Si es así, agrega a css del encabezado una clase que contiene position:fixed (también cambia su altura, ya que solo una parte del encabezado se desplaza). Si el área desplazada está más cerca de la parte superior, la secuencia de comandos elimina la clase que contiene position:fixed desde el CSS del encabezado y cambia la altura a su valor original.
+0
Gracias, intentaré eso. – DaveS
+0
Como recomendación, sugeriría alternar una clase en el encabezado utilizando el evento 'scroll'. Mantenga el CSS donde pertenece en los archivos css. – zzzzBov
+0
@zzzzBov ¡Gran sugerencia! Eso es realmente lo que hace el sitio. Actualizando la respuesta ... – NickAldwin
3
Cuestiones relacionadas
- 1. ¿Cómo crear una barra lateral fija/adhesiva en CSS/JS?
- 2. ¿Cómo establecer correctamente la propiedad adhesiva del botón?
- 3. cabecera Refresh
- 4. establecer el texto de cabecera de una cabecera QTreeView
- 5. "Edad: 0" Cabecera HTTP
- 6. Python cabecera guión
- 7. Python csv sin cabecera
- 8. Shorter Scala Guión cabecera
- 9. cabecera Expira no trabaja
- 10. cabecera retraso ubicación
- 11. ETag vs cabecera Expira
- 12. ¿Cabecera fija a UITableview?
- 13. Makefile, dependencias de cabecera
- 14. python enviar POST con cabecera
- 15. Cabecera del servidor HttpListener C#
- 16. divs colapsando alrededor de cabecera
- 17. Rubí mecanizar post con cabecera
- 18. jQuery scrollTo cabecera fija compensado
- 19. Cabecera de seguridad del eje
- 20. GWT Cabecera de respuesta RPC
- 21. quitar Tomcat cabecera del servidor
- 22. guardias de cabecera y LNK4006
- 23. TableSorter pierde texto de cabecera
- 24. cabecera ELF lectura en C
- 25. crear una información sobre herramientas adhesiva para un punto o una etiqueta permanente usando HighCharts
- 26. WPF GroupBox sin espacio de cabecera
- 27. java.io.StreamCorruptedException: inválido cabecera de flujo: 7371007E
- 28. Crear cabecera cv :: Mat para datos const
- 29. Jquery agregar css a la cabecera
- 30. Cabecera PHP para xml con utf-8
Firefox + Firebug = averiguar cómo funciona –
o Chrome + Herramientas de Desarrollo – NickAldwin
o Internet Explorer + F12 :-P – 2GDev