Docs

[9gdesign]

Hi,

When using the ScrollSpy nav on my one-page website, I noticed that the scroll-to point was about 100px too high above the start of the target element. I did some digging and realised that this is caused because ScrollSpy is using the outerHeight of the navbar to calculate the point to scroll to. This is an issue for me because I have added a custom function that shrinks the navbar when the user scrolls away from the top of the screen. I was able to locate the function that controls the ScrollSpy behaviour in x-body.js, however when editing this in the child theme, it does not have any effect. I wonder if this is because the theme is using x-body.min.js?

Anyway, I need to update the function so that it takes into account the adjusted navbar height. I have tried setting the desired height in css, then altering the initial height with JS on page load, but the consequence of this is that the smaller height shows first for a second before the height is adjusted by js.

Would you be able to assist me with this please?

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[9gdesign]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global Javascript in the Customizer.

Then modify it as you wish.

// Setup ScrollSpy Functionality
// =============================================================================

jQuery(document).ready(function($) {
  $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // 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*="#"]').on('touchstart 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();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

Hope that helps.

[9gdesign]

Hi,

I’ve added and altered the code as per your instructions, but the final result is not quite right. What happens now is that the page scrolls to the point I want it to, then scrolls again to the point directed by the original function. It is as though my adjusted function is run and then the original function runs immediately after. My guess is that it’s the theme file functions that need to be adjusted? New domain is http://www.hoppocketbossingham.co.uk/ (doesn’t need to be private, it’s live anyway).

Here’s my adjusted code (basically just forced it to reset the navbarFixedTopHeight variable on menu item click):

$('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // 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*="#"]').on('touchstart click', function(e) {
    // line below added by me
    navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').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();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

[9gdesign]

Oh, in addition, the changes I made to the function work perfectly when logged into WordPress, but not outside of it.

[Rad]

Hi there,

In that case, please provide your login credentials in the private reply.

For the meantime, please clear your cache and go to your cache plugins setting and disable caching for logged in user.

Thanks!

[9gdesign]

This reply has been marked as private.

[Paul R]

Hi,

Can you provide us your login url.

Wp-admin or wp-login.php doesn’t seem to work.

Thanks

[9gdesign]

This reply has been marked as private.

[Paul R]

Hi,

Thanks, but the login credentials provided is incorrect.

Kindly check again and let us know.

Thanks

[9gdesign]

This reply has been marked as private.

[Paul R]

Hi,

Thanks, I am able to login now.

I went ahead and made the necessary adjustments.

I set the navbar height to a fix value of 127px, that’s the height of your navbar when it shrinks.

Kindly check on your end.

Thanks

[9gdesign]

Hi,

The error still persists for not logged in visitors. Can you give me your email address so that I can share a private youtube video of the behaviour?

Mike

[Rue Nel]

Hello Mike,

We have several staff working in the community forums 24/7. Getting the email address is not possible. Instead, please post the youtube link in your next reply and set your reply as private to make sure that only our staff can view the link.

And by the way, if you are using CloudFlare or may have installed a caching plugin like WordFence, W3 Total Cache or WP Super Cache, please keep in mind that after doing every updates or making any changes, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Thank you.

[Author]

Posts