Menú flotante en Wordpress al estilo de smmart.es

  • Autor Autor SEOmundo
  • Fecha de inicio Fecha de inicio
S

SEOmundo

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola a todos!

Me gustaría saber cómo programar un menú flotante para wordpress, al estilo del de esta web:
Móviles Chinos Libres | Comprar teléfonos baratos online

Cuando hacemos scroll down, podéis ver que el menú "Moviles chinos - Los mejores moviles - Clones chinos..." siempre permanece visible en la parte de arriba de la web.

¿Hay algún plugin para hacer esto? ¿Alguien tiene idea de cómo se puede conseguir este efecto? Utilizo la misma plantilla que este portal y no he encontrado ninguna opción para conseguir esto.

Muchas gracias por adelantado!
 
Allí son 2 cosas.. jQuery para asignar una class a un div con determinado identificador y otro asignar a la class un ( position: fixed; ) para que pueda quedar fijo averigua un poco de lo que te acabo de escribir no están dificil 🙂
 
Hola lvaldivia! Gracias por tu respuesta. Intentaré buscar un manual o algo que me pueda ayudar a entender lo que me comentas porque de programación y aspectos técnicos estoy "un poco" pegado 😀 A ver si consigo dar con la tecla. Un saludo.
 
Si no quieres liarte con el código, lo que buscas tal vez es el plugin Sticky Header: descargar aquí
Si tienes más plugins instalados, te recomiendo que valores el pagespeed con y sin el plugin para que hagas pruebas de carga de la página. Si también hay algún plugin que utiliza jQuery, en ocasiones, puede dar problema de incompatibilidad.
 
Concuerdo con root78 🙂
 
El código que usa es es este:

Insertar CODE, HTML o PHP: 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="clear" id="catcher"></div><!-- aqui esta el limite -->
<div id="sticky" style="background: #000; width:100%; height: 150px;">
</div>
<p style="margin-bottom: 1200px;">Eeste es un ejemplo para <strong>SEOmundo</strong></p>
<p>Opps! ha desaparecido el mensaje</p>

Insertar CODE, HTML o PHP: 
jQuery(document).ready(function() {
	function isScrolledTo(elem) {
		var docViewTop = jQuery(window).scrollTop(); //num of pixels hidden above current screen
		var docViewBottom = docViewTop + jQuery(window).height();


		var elemTop = jQuery(elem).offset().top; //num of pixels above the elem
		var elemBottom = elemTop + jQuery(elem).height();


		return ((elemTop <= docViewTop));
	}


	var catcher = jQuery('#catcher');
	var sticky = jQuery('#sticky');
	
	jQuery(window).scroll(function() {
		if(isScrolledTo(sticky)) {
			sticky.css('position','fixed');
			sticky.css('top','0');
			sticky.css('margin-top','0');
		} 
		var stopHeight = catcher.offset().top + catcher.height();
		if ( stopHeight > sticky.offset().top) {
			sticky.css('position','relative');
			sticky.css('top', 'auto');
			sticky.css('margin-top','30px');
		}
	});
});

Y aquí te dejo un ejemplo: http://fiddle.jshell.net/rm4Lsmec/show/light/
 

Perdón que no tenga nada que ver con el tema, pero como valoro el pagespeed de mi web?
 
[MENTION=11023]SEOmundo[/MENTION], Si de verdad usas el mismo theme que esa web "Splash" creo que tienes una opción de hacerlo con el simple click en activar esa opción.

Yo los uso y así lo tengo comprobado
 
Tienes razón Aitor!! 😎 jaja Buscando de nuevo, he conseguido encontrar esa opción. Muchas gracias por tu ayuda!!

Gracias también a los demás por la otra forma de realizarlo, pero esta ha sido mucho más fácil 🙂

Aitor342 dijo:
[MENTION=11023]SEOmundo[/MENTION], Si de verdad usas el mismo theme que esa web "Splash" creo que tienes una opción de hacerlo con el simple click en activar esa opción.

Yo los uso y así lo tengo comprobado
Hacer clic para expandir...
 
SEOmundo dijo:
Tienes razón Aitor!! 😎 jaja Buscando de nuevo, he conseguido encontrar esa opción. Muchas gracias por tu ayuda!!

Gracias también a los demás por la otra forma de realizarlo, pero esta ha sido mucho más fácil 🙂
Hacer clic para expandir...

Ventajas de conocer donde trabajas, me alegra que este resuelto.
 
Muy interesante hermano gracias :encouragement:
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

R
Plugin Float Menu: Menú flotante personalizable y versátil
Respuestas
1
Visitas
420
Carlos Arreola
C
R
Cómo añadir un menú flotante a tu sitio web
Respuestas
1
Visitas
221
Carlos Arreola
C
L
  • Cerrado
Se solicita Programador para modificar estilo del header y hacerlo flotante en Wordpress
Respuestas
7
Visitas
403
Lubricidad Hernandez
L
R
Crear anuncio flotante en Wordpress: ¿Qué plugin usar?
Respuestas
6
Visitas
7K
scrool
S
Menú
Acceder
Registro