When I scroll, I cannot go back all the way

[ProductionMD1986]

Hi, after adding some codes to keep my topbar sticky on top, whenever I scroll down, I cannot go back all the way.

https://gablafrance.com/

I tried adding this code (found in another thread):

@media (min-width:979px){
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 117px;
}
}

It almost does the trick by pushing everything down, but it causes a problem in my Home page, where my Slider covering all the screen gets pushed down also, which is not really elegant. So I got rid of this line of code.

Any ideas? Thank you for your help.

[jade]

Hi there,

Please add this code to the Global JS:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}

	});

});

This code will remove the class x-navbar-fixed-top added to the navbar area that sets the navbar to be in the top fixed position.

Please note that since this is a custom code, you will have to maintain it in case it will not be compatible with the future versions or if you require further customization.

Hope this helps.

[ProductionMD1986]

It worked!

Thank you very much support team.

[jade]

You’re most welcome.

[ProductionMD1986]

Another question :

I have added some anchor links in some of my pages https://gablafrance.com/residentiel/

and because of the sticky topbar, the titles of the page sections (the anchor being attached to the container where those titles are) are covered by the topbar. Is there a way to avoid this?

Thank you.

[nabeel]

Hi again,

I checked your setup and indeed this is happening due to the header customization you’ve done. The problem goes away when I remove your header customization using developers tool. It would be best that you use Pro for this project so you can configure different header setups. Pro was built to accommodate users demand for a flexible header layout, in your case you’ll need custom Javascript to fix the scrolling issue which is not a good solution and can be the cause of potential issues in future.

As a temporary solution you can add the following code in the Theme Options > JS:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar').outerHeight() + $('.x-topbar').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);
	return false;
  }


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

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


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('touchend click').on('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');
		return false;
      }
    }
  });
});

As you see it requires custom development and it serves as a guide only so we’ll not be able to support any issue arise from the above customization.

Thank you for understanding!

[ProductionMD1986]

Thanks a lot support team.

You saved my day once again.

[nabeel]

Glad we were able to help.

Cheers!