Menu principal flotante plantilla palene  

Hola

Para lograr lo que quieres tienes que trabajar con javascript, para facilitar las cosas, aunque luego puedes separar el código en otro archivo, usa este archivo :

/libraries/gantry/js/gantry-totop.js

Lo primero sería que añadas una clase fixed al contenedor que permanecerá fijo

Al final del archivo tendrías que poner el código javascript

(function( $ ) {
  $(function() {
	$(window).bind('scroll', function () {
	    if ($(window).scrollTop() > 200) {
	        $('#rt-top-surround').addClass('fixed');
	    } else {
	        $('#rt-top-surround').removeClass('fixed');
	    }
	});
  });
})(jQuery);

Lo que hace este código es agregar una clase fixed a la etiqueta que tiene id rt-top-surround siempre y cuando pase el scroll de 200px

Aun no hará nada pero si logras que esto funcione ya es un avance ya que puedes por ejemplo por CSS hacer en base a esta clase algo como :

#rt-top-surround.fixed{
width:100%;
position:fixed;
}

Esto es sólo una prueba, pero teoricamente debería funcionar, tendrías que poner este código en algún archivo CSS que carga tu plantilla.

Saludos.

No se mucho sobre programacion pero gracias por la informacion y la aclaracion, ojala y existiera algo un poco mas facil para nosotros los no - programadores apenas y entiendo algo de Joomla, aun asi muchas gracias,

Hola

Supongo que estas buscando un efecto similar a este:

http://www.shape5.com/demo/shenandoah/index.php?option=com_content&view=article&id=224:fixed-or-floating-menu-and-header-area-&catid=1:latest-news&Itemid=307

Dependerá mucho del tema que estés utilizando para ver que 'hack' al código tendrías que aplicar para conseguir 'fijarlo' al hacer scroll vertical.

Saludos

Efectivamente luís, ese es el efecto que deseo en mi modulo de menú principal, tengo la plantilla noticias Palene del pack webempresa, ¿ donde o como podría hacer ese efecto ? estaba pensando en algún plugin o componente que lo haga y he buscado pero no doy, si es posible modificar algo en la propia plantilla seria lo mejor.

Hola

Lamentablemente este efecto que quieres lograr no es posible a través de una extensión ya que trabaja sobre los elementos de la propia plantilla, lo más fácil sería que la plantilla incluya este efecto, sin embargo la plantilla Palene no lo incluye, por lo que tendrías que tocar código para realizar este efecto

La única forma que veo, tal como te comenté en la respuesta anterior , tendría que agregar código javascript y luego CSS

En realidad el código esta hecho, sólo tienes que agregarlo, intenta hacerlo, te explico nuevamnete

Ubica este archivo dentro de tu carpeta public_html
/libraries/gantry/js/gantry-totop.js

Puedes usar el Administrador de Archivos de tu Cpanel, este artículo te enseña a usar el Administrador de Archivos :

Una vez que ubicas este archivo puedes editarlo desde el administrador de archivos, conserva el código existente, colocate al final del archivo y pega este código :

(function( $ ) {
  $(function() {
	$(window).bind('scroll', function () { if ($(window).scrollTop() > 200) {
	        $('#rt-top-surround').addClass('fixed'); } else {
	        $('#rt-top-surround').removeClass('fixed'); } }); }); })(jQuery);
 

Esto sería la primera parte, pero si esto funciona estaría funcionando lo más importante que es agregar una clase llamada fixed

Si decides hacer esto envianos una respuesta cuando ya lo tengas para ver la segunda parte

Saludos.

Jhon, gracias por la guia y la ayuda detallada, asi me puedo orientar mejor, hice lo que me dijiste sacando copia de seguridad del archivo gantry-totop.js y añadiendo codigo al final y efectivamente funciona muy bien en Firefox, pero en Chrome el efecto queda traslucido y no se visualiza bien, envio printscreen desde Chrome, si pudiera hacerse algo para remediarlo, seria perfecto, pero lo que sugeriste funciono a la perfeccion.

Hola

Debe ser por que falta poner un fondo al #rt-top-surround , tendrías que dejarlo con el efecto para revisar

Teoricamente sería :

#rt-top-surround.fixed{ width:100%; position:fixed; background:white;z-index:100}

Aunque también veo algo respecto al posicionamiento por lo que agregué z-index, igual tienes que poner el código javascript para comprobar

Saludos.

Hola, he puesto el codigo que indicaste pero ahora no se oculta la cabezera y no hace nada, quizas lo haya puesto mal o en la linea que no corresponde, te paso la captura y resalto el codigo con azul, dime si debo colocarlo en otro lugar, Gracias por la ayuda:

Hola Adriana,

Lo que John te ha facilitado es una clase CSS y tu lo estás insertando dentro de .js cuando deberías declarar esa clase en la hoja de estilos .css de la plantilla que estás utilizando.

Saludos

Luis gracias por la respuesta, como dije antes, no se de programacion web, a duras penas entre al mundo Joomla pero con las ayudas guiadas que me han dado he podido lograr algo, encontre en la plantilla Palene en esta ruta ( /public_html/templates/palene/css ) dos archivos CSS ( master-ie8.css ) y ( master-ie9.css ) ¿ en cual de los dos y en que lugar debo poner el codigo ?

Tambien en esta otra ruta hay mas CSS:
/public_html/templates/palene/css-compiled
dentro de esa carpeta estan los siguientes archivos:

bootstrap.css
fusionmenu.css
master-39e7b8642fe76cfb4aa7ccefb7c18752.css
master-849d0f0620fc34e17676f684deb61da1.css
master-ae7a714305ff39a989ea1220377f5713.css
master-cc11f6b762acbc7199d6732bdcc54565.css
master-e7dbb00746c4cb24c370f830429227c7.css
mediaqueries.css
menu-3ac3fe3d8ece5209203db6a73e7fca24.css
menu-547c0259cc3e6e28fa771e20d05c1630.css
menu-a33675e2187b1644f0b2b64b092ce040.css
menu-c7ca5cc9d7cddc503a0223a4d42469b7.css
menu-ef2fcd226e3aa80189e6517c3b879add.css
menu-hovers-547c0259cc3e6e28fa771e20d05c1630.css

Subire las 2 carpetas con los CSS comprimidos:

Hola,

El código CSS que te ha indicado Jhon debes añadir en un archivo CSS personalizado. En el siguiente artículo de nuestro blog se explica cómo añadir CSS personalizado para plantillas como la tuya:

https://www.webempresa.com/blog/agregar-archivo-css-personalizado-para-plantillas-gantry.html

A todos gracias por su ayuda, finalmente aplique el codigo CSS segun el tutorial, ha funcionado muy bien en chrome que es donde no se visualizaba, ahora un ultimo paso, si se dan cuenta, al entrar en la web " que esta en construccion " portalnews.co, el cambio para mostrar alguna noticia mientras deja el menu es muy brusco, muy rapido, me gustaria suavizar el efecto para que pase un poco mas lento y se vea agradable al usuario, ¿ como lo puedo lograr ? ¿ que codigos me servirian para jugar por asi decirlo con varios efectos sobre el menu principal y en que archivo CSS debo ponerlo ? si se dan cuenta, en el principio del post puse 2 web de noticias como ejemplo, es asi como finalmente me agradaria que se vea mi menu, Gracias a todos, un abrazo.

Hola,

En el código javascript que te pasó Jhon prueba a cambiar la línea:

$(window).bind('scroll', function () { if ($(window).scrollTop() > 200) {

por esta otra:

$(window).bind('scroll', function () { if ($(window).scrollTop() > 1) {

Comprueba si así el movimiento es menos brusco. Es posible que después de aplicar el cambio y, una vez cargada la página, tengas que pulsar F5 o Control+F5 para forzar la recarga del código javascript.

Gracias por la respuesta, en efecto el movimiento es menos brusco y mas suave, doy por sentado el tema no sin antes agradecer a todos los que muy gentilmente se tomaron el tiempo para guiarme y ayudarme, feliz dia y que esten muy bien. 🙂