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

[MasterWeb]

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]

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]

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:

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]

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

 

[lombervid]

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.

 

[PedroRamos]

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