Menú fijo (pegajoso) que al desplazarse hacia abajo se oculta

Te vamos a enseñar cómo hacer que la barra de menú de tu blog se queda visible (menú pegajoso) en la parte superior, eso sí, estará visible sólo, etc...

Menú flotante

Te vamos a enseñar cómo hacer que la barra de menú de tu blog se queda visible (menú pegajoso) en la parte superior, eso sí, estará visible sólo cuando se desplace (scroll) hacia la parte superior de la página, cuando el desplazamiento (scroll) se haga hacía la parte inferior de la misma esta se ocultara para no distraer al visitante sobre lo que esta leyendo, esta función se puede ver en esta misma página, en la que podrás comprobar el funcionamiento del menú. Para implantarlo en tu blog sigue las instrucciones que te detallamos a continuación:

Empezaremos con los estilos CSS, justo debajo de <b:skin><![CDATA[ añade este código:

.menu_flotante{position:fixed;left:0;top:0;right:0;transition:all 1s ease-in-out;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:999}.scroll{top:-50px}.no-scroll{top:0;z-index:999}

Ahora busca en tu plantilla <header id='header-wrapper'> (o algo similar) y añade a esa etiqueta esto:

class='menu_flotante'

te tiene que quedar algo así: <header class='menu_flotante' id='header-wrapper'>

Ahora encima de la etiqueta </body> añade este script:

<script type='text/javascript'>
//<![CDATA[
$(function(){var e=$(document).scrollTop();var t=$(".menu_flotante").outerHeight();$(window).scroll(function(){var n=$(window).scrollTop();if($(window).scrollTop()>=50){$(".menu_flotante").css({'position':'fixed'})}else{$(".menu_flotante").css({'position':'fixed'})}if(n>t){$(".menu_flotante").addClass("scroll")}else{$(".menu_flotante").removeClass("scroll")}if(n>e){$(".menu_flotante").removeClass("no-scroll")}else{$(".menu_flotante").addClass("no-scroll")}e=$(window).scrollTop()})})
//]]>
</script>

Haz una vista previa y si todo esta correcto, guarda el tema.


Aviso: Antes de hacer cualquier modificación en tu tema (plantilla) haz una copia de la misma.
Sugerencia: para encontrar rápidamente cualquier texto o etiqueta, pulsa Ctrl+F o ⌘-F (Mac) y utiliza la barra de búsqueda.


Fuente: Pedro PC

Comentarios

BLOGGER


Aviso: En algunos artículos se irá añadiendo texto y/o vídeos según creamos conveniente, para una mayor ilustración de los mismos.

• Si encuentras un error de sintaxis, redacción u ortográfico en el artículo, vídeos que dejaron de funcionar, etc... háznoslo saber a través de contáctanos. ¡Muchas gracias!

Vídeos recomendados


¿Conoces la historia del Rey pescador?



Citroën DS, nació Principe y murio Rey

Enlace: Citroën DS, nació Principe y murio Rey
Nombre

2012,9,3 dimensiones,6,A. Edison,2,A.Turing,2,Abducción,2,Abejas,3,AC-DC,3,Adán y Eva,2,ADN,2,Agua,65,Águilas,4,Air Force One,2,Ajedrez,2,Al Capone,2,Alimentación,40,Alquimia,4,Amor,47,Amuleto/Talismán,2,Anarquismo,2,Ángeles,6,Animales,143,Anonymous,3,Antártida,2,Apocalipsis,3,Apple,7,Arañas,4,Argentina,12,Armagedón,2,Armas,18,Artes marciales,7,Asteroides,13,Atlántida,3,Audio,42,Audio libros,23,Aviones,46,Ballenas,2,Banderas,6,Barbie,3,Barcos,22,Beatles,8,Bebidas,30,Biblia,16,Bicicletas,8,Big Bang,5,Bluetooth,2,Boxeo,3,Britney Spears,2,Brujería,4,Burgos,38,C. Colón,4,Caballos,4,Café,3,Calculadoras,3,Calendario,11,Camiones,3,Cáncer,5,Cárceles,3,Casino,2,Castillos,8,Castrati,2,Cern,4,Cerveza,5,Charlot,3,Chat,3,Che,3,China,24,Ciencia,297,Cine,100,Circo,5,Citröen,3,Clima,21,Clima (Burgos) - Horario mundial,1,Coca cola,2,Códice,4,Código,10,Código abierto,5,Cometas,6,Cómic,7,Concorde,2,Continentes,4,Copla,2,Cuba,3,Cuerpo de élite,3,Cuerpo humano,101,Culturas urbanas,3,Curiosidades,1036,Curiosity Rover,1,Da Vinci,6,Delfines,3,Delorean DMC - 12,2,Deportes,50,Día D,1,Diablo,9,Dibujos,34,Discos,4,Disney,17,Documentales,254,Doodle,2,Dragones,2,Drogas,6,Drones,2,Ébola,2,Eclipses,3,Edad Media,9,EE.UU.,106,Egipto,26,Einstein,3,El Cid,5,El Jarabo,2,El Lute,1,Elvis,3,En directo,5,Energía,48,Enfermedad,40,Enseñanza,175,Esclavitud,2,Escorpiones,2,Espadas,2,España y Pueblos,227,Estrellas,12,Exorcismo,6,Fantasmas,8,Ferrari,5,Física,33,Flamenco,2,Fobias,3,Ford,3,Formula 1,2,Fotografía,26,Francia,10,Franco,11,Francotiradores,3,Frases/Dichos,10,Freddie Mercury,3,Fuego,9,Fútbol,23,Galileo,4,Gandhi,2,Gastronomía,5,Gigantismo,3,Gitanos,5,Gliese 832,2,Google,17,GPS,3,Groucho Marx,2,Guerra,74,Guinness,8,Guitarras,5,H.Davidson,2,Hackers,14,Halloween,3,Hilo rojo,2,Hippie,2,Historia,625,Hitler,14,Homosexualidad,3,Humor,57,Idiomas,7,Imprenta,4,Indígenas,4,Indios,5,Informática,112,Insectos,10,Internet,66,Inventos,177,Invidente,5,Italia,14,Jabón,3,Jackson,9,Japón,19,Jesucristo,12,John Lennon,3,Juegos,31,Juegos en línea,24,Juegos olímpicos,5,Juguete,9,Kennedy,2,Lady Di,2,Las fuerzas del planeta (Serie),5,Láser,3,Leyendas,102,Libros,32,Lotería,2,Luis Lucena,2,Luna,19,Mafia,7,Magia,10,Magnetismo,16,Máquina del tiempo,2,Maradona,4,Maratón,2,Marie Curie,2,Marilyn Monroe,3,Mayas,8,McDonald's,3,Medidor,1,México,26,Mi pedazo de cielo,1,Misterio,238,Mitologías,2,Moda,11,Mona Lisa,2,Monarca,4,Monedas,8,Monopoly,2,Mosquitos,2,Motor,63,Motor de agua,2,Motos,8,Mozart,2,Museo,7,Música,132,Napoleón,2,Nasa,12,Navarra,4,Navidad,28,Nintendo,4,Nostradamus,3,Noticias,250,Notre Dame,2,Nuclear,16,Obesidad,3,Ouija,2,Ovnis,30,Pamplona,2,Papa,6,Papá Noel,2,Pegamento,2,Pendrive,3,Península Ibérica,2,Perfumes,2,Perros,17,Personas,458,Petróleo,2,Piedras preciosas,2,Pinocho,2,Pintura,14,Pirámides,4,Piratas,6,Pirotecnia,3,Plantas,24,Pokémon Go,2,Polígrafo,2,Poltergeist,2,Profecías,9,Psicofonía,2,Queen,4,Quijote,2,Química,8,Radio,14,Ranas,2,Recordando a,190,Reencarnación,3,Reggae,2,Religión,130,Relojes,16,Resaca,2,Reyes magos,5,Rock,7,Roma,32,Rosetta,2,Rusia,24,Sabías que,1637,Salud,158,San Valentín,2,Seducción,3,Semana Santa,4,SETI,3,Shakira,2,SIDA,6,Simpson,3,Sistema solar,14,Sol,35,Spam,3,Submarino,4,Sucesos,64,Sueños,20,Sugerencias,35,Symbian,33,Tabaco,3,Tatuajes,5,Tecnología,273,Ted Williams,2,Telefonía,59,Telescopios,5,Televisión,18,Templarios,3,Teresa de Calcuta,2,Terremotos,12,Test,4,Tetris,2,Tiburones,11,Tierra,110,Titanic,11,Toros,5,Torre Eiffel,2,Torres gemelas,2,Trenes,11,Triángulo de las Bermudas,4,Trucos,4,Tutankamón,4,Tutorial,13,Universo,117,Vacunas,3,Varios,94,Vídeo,655,Videojuegos,5,Vino,2,Virus,6,Virus informáticos,15,Vril,2,Whisky,2,Windows,6,YouTube,6,Zodiaco,4,Zombis,3,
ltr
item
Te interesa saber: Menú fijo (pegajoso) que al desplazarse hacia abajo se oculta
Menú fijo (pegajoso) que al desplazarse hacia abajo se oculta
Te vamos a enseñar cómo hacer que la barra de menú de tu blog se queda visible (menú pegajoso) en la parte superior, eso sí, estará visible sólo, etc...
https://4.bp.blogspot.com/-8iV4Wo7P8ro/WMXY9L8SxwI/AAAAAAAAND4/koEXkbpMMGsKpft_1VmPG2PSgzQ65dEAwCLcB/s320/menu-flotante.jpg
https://4.bp.blogspot.com/-8iV4Wo7P8ro/WMXY9L8SxwI/AAAAAAAAND4/koEXkbpMMGsKpft_1VmPG2PSgzQ65dEAwCLcB/s72-c/menu-flotante.jpg
Te interesa saber
http://www.teinteresasaber.com/2017/03/menu-fijo-pegajoso-que-al-desplazarse.html
http://www.teinteresasaber.com/
http://www.teinteresasaber.com/
http://www.teinteresasaber.com/2017/03/menu-fijo-pegajoso-que-al-desplazarse.html
true
637010643059257927
UTF-8
Cargar todos los artículos No se ha encontrado Ver todo Seguir leyendo... Responder Cancelar respuesta Borrar Por Inicio Páginas Artículos Ver todo Recomendados para ti: Etiqueta Archivo Buscar Todos los artículos No se encontró nada con este término Volver a Inicio Domingo Lunes Martes Miércoles Jueves Viernes Sábado Domingo Lunes Martes Miércoles Jueves Viernes Sábado Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre justo ahora hace 1 minuto hace $$1$$ minutos hace 1 hora hace $$1$$ horas Ayer hace $$1$$ días hace $$1$$ semanas hace más de 5 semanas Seguidores Seguir Este contenido es premium Compartir para desbloquear Copie todo el código Seleccione todo el código Todos los códigos se copiaron en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy