Scroll to Link offset for smaller navbar

[procos]

Hi,

we customized our navbar so that it docks/shrinks after the user scrolls past a certain point in the page (to achieve docking efftect).

This done via Customizer->JS by adding/removing a “.docked” class to the x-navbar.

Through CSS it changes the height from 90px to 65px.

Our navbar only floats and docks when in Desktop, In Mobile it is only visible at the top of the page.

We were able to override the default scroll behaviour with this line in Customizer->JS:

$('.menu-item > a[href*="#"], .scroll-link').unbind('touchend click');

And added the following code in Customizer->JS which is based on the old x-body.js file with slight modifications to evaluate the navbar height on every event and not just once.

  var navbar_height = 91;
  var docked_navbar_height = 65;

jQuery(function($) {
  
	var $body                = $('body');
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var locHash              = null;
  var dragging             = false;

  var locHashIndex = location.href.indexOf('#');
  if ( -1 !== locHashIndex ) {
    locHash = location.href.substr(locHashIndex).split('/')[0];
  }

  $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 ) {

    if ( ! element ) {
      return;
    }

    try {
      var $el = $(element);
    } catch(error) {
      // abort on invalid selectors. see #610
      return;
    }

    if ( ! $el || 0 == $el.length ) {
      return;
    }

    var navbarFixedTopHeight = 0; 
    if($(window).width() >= 979) {
			navbarFixedTopHeight = $el.offset().top <=  $(window).height()-navbar_height ? navbar_height : docked_navbar_height;
    }
    
  	$('html, body').animate({
      scrollTop: $el.offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);

  }

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

  $(window).on('load', function() {
    animateOffset(locHash, 1, 'linear');
  }); 
  
  //
  // Scroll trigger.
  //
	
  $('.menu-item > a[href*="#"], .scroll-link').unbind('touchend click');
  
 $('.menu-item > a[href*="#"], .scroll-link').on('touchend click', function(e) {
    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');
      }
    }
  });

});

However, with the recent update of X we are no longer able to unbind the X’s default scroll to behaviour (which considers that the navbar height is always at 90px).

Would it be possible to either:

Unbind the default scroll behavior so we use our own code for scroll links…

Or

Use the new X Theme code but somehow be able to consider the change in navbar height.

Thank you.

[thai]

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

• Link to your site
• WordPress Admin username / password

Thanks.

[procos]

Hi,

credentials have been provided in the previous message.

On the same topic, the Scrollspy feature seems to have stopped working as well since the X Theme update.

Thank you

[rad]

Hi @procos,

There is no way to customize the existing javascript code (it’s not the same with PHP or CSS that can be overridden). You can also use the off(), like $('.menu-item > a[href*="#"], .scroll-link').off('touchend click');

Or you can wrap your code with setTimeout() to make sure your code is executed after other javascript. Example,

$(document).ready ( function() { //make sure to only start when the page is loaded before starting the delay

setTimeout ( function() {

//your code start

 $('.menu-item > a[href*="#"], .scroll-link').unbind('touchend click');
  
 $('.menu-item > a[href*="#"], .scroll-link').on('touchend click', function(e) {
    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');
      }
    }
  });

});

//your code end

}, 750 ); //0.75 second delay

} );

The idea is to call unbind after it’s binded and not before. So adding a bit of delay after other javascript is okay too.

Thanks!

[procos]

Hello,

thanks for the reply but the unbind/off doesn’t seem to be working; both X’s code and ours is still running when we click on links.

Since the underlying JS code has changed a lot with the update (from x-body.js to X.js) it seems normal that the unbind will do nothing?

Could you provide us an alternative way of unbinding menu-item anchor clicks? Our implementation also considered the offset in Mobile, which doesn’t seem to be OK in X at the moment (see Integrity 2 demo in Mobile view).

Alternatively, is there anyway we can obtain a release of X previous to May 29th as our website was meant to go live this week and the update has rendered it unstable.

This is urgent.

Thank you