Cómo crear una barra superior para mostrar el título del post al desplazarse en Genesis con WP

MasterWeb Seguir

Zeta
Verificado por Whatsapp
Desde
13 Nov 2010
Mensajes
1.701
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!
 

lombervid

Zeta
Verificación en dos pasos activada
Desde
29 Abr 2011
Mensajes
1.509
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.
 

Getsuga

Gamma
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
15 May 2014
Mensajes
234
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:

Insertar CODE, HTML o 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;
		}]
	};
 

MasterWeb

Zeta
Verificado por Whatsapp
Desde
13 Nov 2010
Mensajes
1.701
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
 
Arriba