[madvibesParticipant]

hello,

I have a persistent topbar and nav on the top of my page, which makes it tricky to find the right element to scroll to from within the page.

I’d like to add 85px to the scroll so that the nav/topbar do not get taken into consideration when scrolling in page. Where can I add this?

I am on a child theme.

littlesprouts.com

[Rue NelModerator]

Hello There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

For the meantime, please try to add this custom JS code in your customizer, Appearance > Customize > Custom > Javascript

// Custom Fixed Top Navbar
// =============================================================================

jQuery(function($) {

  var $body   = $('body');
  var $navbar = $('.x-navbar');

  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {

    var boxedClasses = '';

    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {

      if ( $(this).scrollTop() >= navbarOffset() ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }

    });

  }

  function navbarOffset() {
    return ($('.x-navbar-wrap').offset().top - $('#wpadminbar').outerHeight()) + 85;
  }

});

Hope this helps.

[madvibesParticipant]

I need to account for the height of the nav and topbar when scrolling to in-page elements.

go to this page: http://littlesprouts.com/schools/amesbury/

Click the Map & Directions button – the page scrolls down to the top of the map. However, I set the actual #map link on the [line] element above the map and the header of the map section, but the page scrolls down too far, because the topbar and nav elements are not being factored into the scroll positioning.

In short, i don’t want it to scroll down so far.

[Paul RModerator]

Hi,

To fix it, you can add this under Custom > Javascript in the Customizer.

jQuery(document).ready(function($) {
 $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var topbarHeight         = $('.x-topbar').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 - topbarHeight + 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;
    notAccordion     = $href.indexOf('#collapse-') === -1;
    notTabbedContent = $href.indexOf('#tab-') === -1;
    if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
      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 + topbarHeight
    });

    //
    // 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

[Author]

Posts