Alb full width submenu sticky on mobile upgrade

Hi
Sorry Guenny 007 but I don’t understand how this solution, although very interesting, can help me. It may also be that I misunderstood how to use the files you kindly make available, but the links on the example page point to other pages, while I am trying to solve scrolling within the same page so that the anchorpoint content does not go under the Fullwidth Sub Menu of the ALB of tablets and mobiles.

Trying to resolve this issue, I had problems with pages scrolling in a jerky motion, but I figured out what my error was.
Mike had given me a function to solve the problem involving two screen widths < 989 and > 990.
Mike’s code works very well and gives no smooth scrolling problems.
I did, however, need a third screen width (> 768 < 989) because the Fullwidth Sub Menu of the ALB on mobile phones would go on two rows.
So I tried adding to the script:
else if ((width > 767 && width < 989)) {
At this point the scrolling of the site started to work horribly on all pages. It is obvious that I messed up something when I added the third screen width.
This is Mike’s code that works:

function custom_change_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if ((width < 989)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
    } 
    else if ((width > 990)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
    }
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_change_offset', 99 );

And this is the code revised by me that makes the whole site scroll badly even though it puts the anchor points in the right place:

function custom_change_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if (width < 767)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 220 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 220 //offset
        }, 1000);
        return false;
      }
    }
    } 
	else if ((width > 768 && width < 989)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 170 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 170//offset
        }, 1000);
        return false;
      }
    }
    } 
   else if ((width > 990)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 180 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 180//offset
        }, 1000);
        return false;
      }
    }
    } 
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_change_offset', 99 );

If anyone can help me, I’d like to figure out where I went wrong and be able to use three different offsets for the three different screen widths.

• This reply was modified 5 months ago by manurimini.

Sorry Ismael,
I had to delete this comment because I need further investigations
Best Regards
Manu

• This reply was modified 5 months ago by manurimini.
• This reply was modified 5 months ago by manurimini.

Hi Ismael,
After many tests on different installations, I have come to the conclusion that the lagging scrolling behavior is given by the function:
https://kriesi.at/documentation/enfold/fullwidth-sub-menu/#toggle-id-4

/**
 * Full Width Submenu active
 */

function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {      
     var sections = jQuery('.avia-section'),
         menu   = jQuery('.av-submenu-container'),
         nav_height = menu.outerHeight();
         jQuery(window).on('scroll', function() {
            var cur_pos = jQuery(this).scrollTop();
            sections.each(function() {
                var top = jQuery(this).offset().top - 300,
                    bottom = top + jQuery(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                    menu.find('li').removeClass('active-menu-item');                    
                    menu.find('a[href="#' + jQuery(this).attr('id') + '"]').parent('li').addClass('active-menu-item');
                }
            });
        });
    });
 
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

Is there another way to set active on the ALB Fullwidth Sub Menu?
Thank you
Best Regards
Manu

Hi Ismael,
This is the link to the website we are building: https://www.clinicagrafica.it/domus
We have also prepared login credentials for you. You’ll find the credentials in Private Content.
The issue (the lagging scrolling behavior) is particularly visible in Safari if you are using MacOs, while on Microsoft the issue is on all browsers.
Best Regards
Manu

Thank you Ismael
The website now seems to be scrolling quite smoothly.

Best Regards
Manu

• This reply was modified 4 months, 4 weeks ago by manurimini.