Menú flotante en Wordpress al estilo de smmart.es

S

SEOmundo

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 19 Nov 2014

• #1

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!

 

L

lvaldivia

Beta

Programador

Verificado por Whatsapp

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 19 Nov 2014

• #2

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 🙂

 

S

SEOmundo

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 19 Nov 2014

• #3

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.

 

root78

Delta

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

• 19 Nov 2014

• #4

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.

 

L

lvaldivia

Beta

Programador

Verificado por Whatsapp

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 19 Nov 2014

• #5

Concuerdo con root78 🙂

 

S

SnakeNet

Xi

Programador

• 19 Nov 2014

• #6

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/

 

LuiggiC

Préstamo

Ómicron

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

Verificado por Binance

• 19 Nov 2014

• #7

root78 dijo:

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.

Hacer clic para expandir...

Perdón que no tenga nada que ver con el tema, pero como valoro el pagespeed de mi web?

 

S

SnakeNet

Xi

Programador

• 19 Nov 2014

• #8

Skrollex dijo:

Perdón que no tenga nada que ver con el tema, pero como valoro el pagespeed de mi web?

Hacer clic para expandir...

Desde aquí puedes https://developers.google.com/speed/pagespeed/insights/

 

A

Aitor342

Delta

Domainer

• 19 Nov 2014

• #9

[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

 

S

SEOmundo

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 19 Nov 2014

• #10

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...

 

S

SnakeNet

Xi

Programador

• 19 Nov 2014

• #11

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.

 

Mandrake1

Gamma

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

Verificado por Binance

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 19 Nov 2014

• #12

Muy interesante hermano gracias :encouragement: