#pro sticky header with anchor links scrolls too far

Support
#21

I’m in a similar or very similar case: I have a “sticky header”, and I would like anchor links to “ids” in the same page to calculate the offset “header height”, if not the sticky header is overlaping the desired margins.

I’m trying the js code here, but when I use it the scroll buttons stop working.

I use two types of anchors: the scroll button provided by the theme, and custom buttons to archor points. Here you can see it:

It would be nice that the theme itself take this in account when you select sticky header.

Thank you for your help.

#22

Hello There,

Thanks for updating this thread. I can confirm that the scroll button does not display the content section correctly. I’ve submitted this to our issue tracker so the developers will be made aware of it. Once they’ll fix it, it will be updated and will be rolled out in the next update release cycle.

Please bear with us. Thanks.

#23

i know this thread is old, but i’ve bumped into the same problem as llribas today (11 oct 2019, pro 7.0.4).

i played about with the above JS a little, and discovered that jquery has changed the easing options in the interim which is why it didn’t work (at all) for me. changing line 62 got things working:

animateOffset($el, 850, ‘xEaseInOutExpo’);

notice the added ‘x’ in ‘xEaseInOutExpo’

i also found that my ‘navbarFixedTopHeight’ selector needs to be ‘.masthead’ to correctly determine the offset.

here’s the full code for copy-n-paste:

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.masthead').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
	  dragging = true;
  } );
  
  $body.on('touchstart', function() {
	  dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
	$('html, body').animate({
	  scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
	}, ms, easing);
  }


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
	if ( locHashIndex !== -1 && $(locHash).length ) {
	  animateOffset(locHash, 1, 'linear');
	}
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').unbind('touchend click').bind('touchend click', function(e) {
	  console.log($('.hm1.x-bar-fixed').outerHeight());
	href        = $(this).attr('href');
	notComments = href.indexOf('#comments') === -1;
	if ( href !== '#' && notComments ) {
	  var theId = href.split('#').pop();
	  var $el   = $('#' + theId);
	  if ( $el.length > 0 ) {
		e.preventDefault();
		
		if (dragging) {
			return;
		}
		
		animateOffset($el, 850, 'xEaseInOutExpo');
	  }
	}
  });
});
#24

Hello @thinkthalamus,

Thanks for writing in!

As this is a very old thread and to avoid any confusion, I request you to please create a new ticket, share the details in the same and someone from Themeco support team will take a look.

Thanks for understanding.

#25

hi prasant,

but … i don’t need any support. as my post indicates, i managed to fix the problem.

this thread was among the first 5 hits for me when searching for the problem, and i thought it might be useful for others to see my fix - especially the ‘xEaseInOutExpo’ bit.

1 Like
#26

Where do we copy and past this code?

Thanks for your help. We are having issues too!

#27

open ‘theme options’ and then look for the ‘JS’ button down the left hand side. past the code into that window and make sure you hit ‘save’ at the very bottom left.

#28

Hey Kirk,

It is best that you open up your issue in a separate thread. Meanwhile, you can find the Custom JS section in X(Pro) > Theme Options > Custom JS.

@thinkthalamus:
Thanks for chiming in!