Little problem with Sticky menu Navigation

[marcomac]

Hello,
first of all, Flex Pro Theme is fantastic, the best theme I’ve bought since using Genesis Framework.

I have a little problem with sticky menu that I have activated following this article: http://www.simpleprothemes.com/sticky-navigation-menu-flex-pro-theme/

It works, but you see a “snap” very ugly looking. I tried to disable the script smoothscrolling.js, same problem.

This anomaly occurs with all browsers on Mac, especially with Firefox sometimes you see a kind of “flash”.

I made this short video where you see this “snap”: https://youtu.be/wj3D7FDPM2E

Thanks for any help or suggestions.

[Chinmoy Paul]

Replace the old sticky nav javascript with this new one

/* ===================================
   * Sticky Nav   
   * =================================== */
  var $header_bar = $site_header = $wpadminbar = 0;
  if( $('.site-top').length ) { $header_bar = $('.site-top').innerHeight(); }
  if( $('.site-header').length ) { $site_header = $('.site-header').innerHeight(); }
  if( $('#wpadminbar').length ) { $wpadminbar = $('#wpadminbar').innerHeight(); }
  $(window).scroll(function() {
    if ( $(window).scrollTop() > ( $site_header + $header_bar + $wpadminbar ) ) {
      
      $('body').addClass('sticky-nav');
      if( $('#wpadminbar').length ) { $('.site-navigation').css({'margin-top': $wpadminbar + 'px'}); }
      
      var nav_h = $('.site-navigation').innerHeight();        
      if( $('body').hasClass('home') && $('#home-top').length ) {
        $('#home-top').css({'margin-top': nav_h + 'px'});
      } else if( $('body').hasClass('home') && ( ! $('#home-top').length ) && $('#home-middle').length ) {
        $('#home-middle').css({'margin-top': nav_h + 'px'});
      } else {
        $('.site-inner').css({'margin-top': nav_h + 'px'});
      }
      
    } else {
    
      $('body').removeClass('sticky-nav');
      if( $('#wpadminbar').length ) { $('.site-navigation').removeAttr('style'); }
      
      if( $('body').hasClass('home') && $('#home-top').length ) {        
        $('#home-top').removeAttr('style');                              
      } else if( $('body').hasClass('home') && ( ! $('#home-top').length ) && $('#home-middle').length ) {        
        $('#home-middle').removeAttr('style');                                                                   
      } else {        
        $('.site-inner').removeAttr('style');
      }
      
    }
  });

You would edit the global.js file only

[marcomac]

Hi,
great, now it works fine!
Even with Firefox, the “flash” has disappeared

Many thanks

[Author]

Posts