Nav button scroll down too far to ID:s - header hides content

[Lobsterass]

Hi!

My 160 px tall header hides content when clicking on nav button in one page layout. What to do?

I found this JQuery but it makes buttons stop working:

jQuery(function($){
$(‘a[href*="#"]’).off(‘touchend click’);
$(‘a[href*="#"]’).on(‘touchend click’, function(e) {
e.preventDefault();
var id = $(this).attr(‘href’);
var $id = $(id);
if ($id.length === 0) {
return;
}

var pos = $id.offset().top - 160;
$('body, html').animate({scrollTop: pos}, 1000, 'easeInOutQuart');
return false;

});
});

[paul.r]

Hi,

You can try this code instead.

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchend click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 176;
  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;
  } );

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

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

  $('a[href*="#"]').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, 'easeInOutExpo');
      }
    }
  });

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

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


    $(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.

[Lobsterass]

Hi Paul!

Thanx! That seems to work great this far in my process.

I’ll holler back in case new issues arise while I continue developing the design.

Thanx, man!

[thai]

You’re welcome