Sticky menu con Table of content plus

El script que he utilizado es una mezcla de varios scripts ya que no soy programadora de js pero funciona, intentaré ir puliéndolo según vaya aprendiendo.
El plugin que he usado para crear la tabla es Table of content plus. Es un plugin gratuito que te permite crear menus dentro de la página en función de los títulos <h2><h3><h4>… Yo lo he configurado para que sólo aparezcan los h2 en el menú.

Para que funcione el script debemos incluir jquery-3.2.1.min.js.  Yo lo he añadido en una carpeta de mi tema y lo he añadido desde functions.php con wp_enqueue_script:

function my_scripts() {
 
 if (is_page()){
 wp_enqueue_script( 'jquery-3.2.1.min', get_stylesheet_directory_uri() . '/js/jquery-3.2.1.min.js', true );

}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

 

var topRange = 100, // measure from the top of the viewport to X pixels down
	edgeMargin = 100, // margin above the top or margin from the end of the page
	animationTime = 1200, // time in milliseconds
	mn = $("#toc_container"),
	mns = "stick",
	fns = "footer-stick",
	hdr = $('.page-header-content').height(),
	contentTop = [];
$(document).ready(function() {
		// Stop animated scroll if the user does something
		$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
				if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
					$('html,body').stop();
				}
			})
			// Set up content an array of locations
		$('#toc_container').find('a').each(function() {
				contentTop.push($($(this).attr('href')).offset().top);
			})
			// Animate menu scroll to content
		$('#toc_container').find('a').click(function() {
				var sel = this,
					newTop = Math.min(contentTop[$('#toc_container a').index($(this))], $(document).height() - $(window).height()); 
				$('html,body').stop().animate({
					'scrollTop': newTop
				}, animationTime, function() {
					window.location.hash = $(sel).attr('href');
				});
				return false;
			})
			// adjust side menu
		$(window).scroll(function() {
			//stiky menu
			if ($(this).scrollTop() > hdr) {
				mn.addClass(mns);
			} else {
				mn.removeClass(mns);
			}
			//add class si esta cerca del final de página
			if ($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
				mn.addClass(fns);
			} else {
				mn.removeClass(fns);
			}
			//cambio de clases  
			var winTop = $(window).scrollTop(),
				bodyHt = $(document).height(),
				vpHt = $(window).height() + edgeMargin; // viewport height + margin
			$.each(contentTop, function(i, loc) {
				if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
					$('#toc_container li').removeClass('selected').eq(i).addClass('selected');
				}
			})
		})
	}) // JavaScript Document

Para que funcione el css es el siguiente:

 

.stick {
 top: 100px;
 position: fixed;
 left: 0;
}
.footer-stick {
 bottom: 400px!important;
 top: inherit!important;
}

Deja un comentario