Cómo hacer tu propia barra de encabezado pegajosa como MakeUseOf

Hace aproximadamente un mes, introdujimos un nuevo elemento de interfaz en MakeUseOf: una barra de búsqueda y navegación flotante. La retroalimentación que hemos recibido es casi totalmente positiva, el tráfico de búsqueda interna se ha disparado y algunos lectores han estado preguntando sobre cómo crear uno para su propio sitio, así que pensé en compartirlo..

Usaremos jQuery para pegar la barra en la parte superior de la pantalla, pero solo después de cierto punto. Haré todo esto en el tema de WordPress predeterminado: Twenty Eleven, aunque, por supuesto, se puede aplicar a cualquier tema o sitio web que entiendas lo suficiente como para modificarlo..

El HTML

En primer lugar, abra los temas header.php e identifique la barra de navegación que vamos a realizar. Como dije, el código de abajo es para el predeterminado veintiocho; el tuyo puede variar.

En primer lugar, agregue un nuevo contenedor DIV que rodea esta sección NAV completa.

Además, movamos esa barra de búsqueda predeterminada aquí. Notará que se ha agregado por defecto en la parte superior derecha del tema; encuentra la linea y pegarlo en nuestra sección de navegación. Eliminar todas las demás instancias de este en este archivo.

Si guarda y actualiza ahora, verá que el formulario de búsqueda no aparece realmente en la barra de navegación, aún se muestra en la parte superior derecha. Eso se debe a que se ha posicionado absolutamente con CSS, y eliminaremos todo eso en un segundo.

El CSS

Abra el archivo principal style.css y busque la sección para el formulario de búsqueda:

 #branding #searchform …

Reemplace lo que esté dentro de eso (debería ser capaz de unas cuatro líneas, incluyendo un posicionamiento absoluto) con esto:

 #branding #searchform float: left; fondo: blanco; margen: 7px; 

Siéntase libre de ajustar el color o el margen. Cambia el flotador si prefieres que aparezca a la derecha de la barra. En este tema, la búsqueda está configurada para expandirse cuando el usuario hace clic dentro de él; Eso está fuera del alcance de este tutorial, pero puede ver un efecto similar en nuestra Búsqueda MakeUseOf.

jQuery

Si se está preguntando por qué estamos usando jQuery para hacer esto, es simple: CSS está arreglado y no se puede ajustar dinámicamente. Si bien podríamos usar CSS para hacer un encabezado fijo, debería ser el elemento superior de la página. El problema que tenemos es que nuestro menú no es el elemento principal, por lo que no podemos empezar por estar pegajoso. Aquí es donde se usa el jQuery; podemos comprobar cuando el usuario pasa un determinado punto; entonces, y solo entonces, hazlo pegajoso.

Comience agregando jQuery a su tema. Tu tema ya puede tenerlo cargado; Si no, no te preocupes. Puede ponerlo en cola agregando el siguiente código a su functions.php, así:

O simplemente puede omitir WordPress por completo y convertirlo en un archivo de cabecera. En algún lugar de tu sección de cabeza, solo agrega esta línea:

Si utiliza el primer método, se cargará en no conflicto modo, lo que significa que necesitarás usar “jQuery” en su código para acceder a las funciones de jQuery. Si usa el segundo método para agregarlo directamente a su encabezado, puede usar el descriptor de acceso jQuery estándar de PS. Asumiré el segundo método en el código de abajo..

Entonces, para agregar un código real de jQuery, coloque lo siguiente en algún lugar al final de su header.php - He puesto el mio justo antes de la