Como criar uma barra superior para mostrar o título do post ao rolar a página no Genesis com WP

  • Autor Autor MasterWeb
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
MasterWeb

MasterWeb

Zeta
Hola amigos de Forobeta,

estoy haciendo mi template en Genesis con WP y quiero hacer algo parecido a la barra que aparece en la parte de arriba cuando se lee el texto como en esta web https://cepesrural.lamula.pe/2014/08/14/manuel-chiriboga-amigo-y-colega-ha-fallecido/cepesrural/

tienen alguna idea de cómo se realiza? es decir qué elementos y propiedades css debo usar para que se vea el título de del post en la parte de arriba cuando se baja a leer el texto?

esa funcionalidad me gusta demasiado por que así se hace recordar al usuario lo que está leyendo…

también de cómo hacen para mostrar la cantidad de tiempo de lectura y el progress bar.

Espero me puedan dar una mano.

Slds!
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Para que aparezca y esté en esa posición, con un position fixed y un visibility hidden y lo pases a visible ó una opacidad de 0 y lo pases a 1, y para lo del tiempo leido, supongo que ha de ser algun evento, de js/jquery , en el scroll.

Saludos.
 
Amigo usa jquery y calcula el valor inicial para ver si te desplazaste "scroll", para hacer que se llena la barra ps esos son simple transiciones. una parte del codigo.Simplemente con chrome coloca el puntero sobre es barra y dale inspecionar elemento y te saldra el codigo(me imagino que eso ya lo sabias).:encouragement:

Inserir CODE, HTML ou PHP:
var fxNow, timerId,
	rfxtypes = /^(?:toggle|show|hide)$/,
	rfxnum = new RegExp( "^(?:([+-])=|)(" + core_pnum + ")([a-z%]*)$", "i" ),
	rrun = /queueHooks$/,
	animationPrefilters = [ defaultPrefilter ],
	tweeners = {
		"*": [function( prop, value ) {
			var end, unit,
				tween = this.createTween( prop, value ),
				parts = rfxnum.exec( value ),
				target = tween.cur(),
				start = +target || 0,
				scale = 1,
				maxIterations = 20;

			if ( parts ) {
				end = +parts[2];
				unit = parts[3] || ( jQuery.cssNumber[ prop ] ? "" : "px" );

				// We need to compute starting value
				if ( unit !== "px" && start ) {
					// Iteratively approximate from a nonzero starting point
					// Prefer the current property, because this process will be trivial if it uses the same units
					// Fallback to end or a simple constant
					start = jQuery.css( tween.elem, prop, true ) || end || 1;

					do {
						// If previous iteration zeroed out, double until we get *something*
						// Use a string for doubling factor so we don't accidentally see scale as unchanged below
						scale = scale || ".5";

						// Adjust and apply
						start = start / scale;
						jQuery.style( tween.elem, prop, start + unit );

					// Update scale, tolerating zero or NaN from tween.cur()
					// And breaking the loop if scale is unchanged or perfect, or if we've just had enough
					} while ( scale !== (scale = tween.cur() / target) && scale !== 1 && --maxIterations );
				}

				tween.unit = unit;
				tween.start = start;
				// If a +=/-= token was provided, we're doing a relative animation
				tween.end = parts[1] ? start + ( parts[1] + 1 ) * end : end;
			}
			return tween;
		}]
	};
 
Para que aparezca y esté en esa posición, con un position fixed y un visibility hidden y lo pases a visible ó una opacidad de 0 y lo pases a 1, y para lo del tiempo leido, supongo que ha de ser algun evento, de js/jquery , en el scroll.

Saludos.

y cómo le digo al css a partir de qué altura de scroll comienza a ser visible
 
y cómo le digo al css a partir de qué altura de scroll comienza a ser visible

Supongo que tendria que cambiarse las propiedades/clases con JS también.
 
Última edição:
Hola amigo, eso lo puedes hacer con @ media queries para calcular que propiedades css se activan depende a la resolucion
que ba navegabdo el usuario.

Aqui te dejo esta pagina donde explica como se utilizan

https://developer.mozilla.org/es/docs/CSS/Media_queries

espero te sirva, saludos
 
Última edição:
Voltar
Topo