Support » Theme: Ignis » Mobile Scrolling Issues

  • hi

    My issue is that when I start scrolling down on mobile phone, and when menu bar reach out the top of the mobile screen the page content all of sudden jumping a couple of centimeters down….

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hello there,

    Please share your site URL here, so I can have a closer look.

    Regards,
    Kharis

    Hi Kharis.

    I was testing it on here.

    Also I wanted to have menu bar stick on top of the screes while I am scrolling up and down.
    Very similar to the code provided for Sydney theme:

    jQuery(function($) {
    
      if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
    
        var headerFix = $('.site-header').offset().top;
        var vDistance = headerFix+280;
    
        var inserated = false
        $(window).on('load scroll', function() {
          var y = $(this).scrollTop();
          if ( y >= vDistance) {
    
            if(inserated == false){
              var newHead = $('#masthead').clone();
              
              (newHead).prependTo('body').addClass('masthead-clone').animate({
                top: 0
              }).resize();
    
              $('.masthead-clone .btn-menu').on('click', function() {
                  $('.masthead-clone #mainnav-mobi').slideToggle(300);
                  $(this).toggleClass('active');
              });
    
              $(document).on('click', '.masthead-clone #mainnav-mobi li .btn-submenu', function(e) {
                  $(this).toggleClass('active').next('ul').slideToggle(300);
                  e.stopImmediatePropagation()
              });          
              
              inserated = true;
              
            }    
            
          } else {
          
            $('.masthead-clone').animate({
              top: -200
            }).remove();
            inserated = false;
            
          }
    
        });
      
      }
    
    });

    Thanks

    Hello there,

    Please share a link where you got that code from.

    Regards,
    Kharis

    Hi Kharis (@kharisblank).

    the code is from here (Sydney theme). If you will look at the scrolling on mobile device it’s so smooth. and I like how sticky menu bar appears on the top of the screen. It was jumping before and wasn’t as perfect as now, after you provided the code. I would like you, please, to make Ingis to work the same way.

    thanks

    Hi Kharis.
    Sorry for bothering you, but any updates?

    thanks

    Hello there,

    Please try this JS code:

    
    (function($){
    
      if ( matchMedia( 'only screen and (max-width: 1023px)' ).matches ) {
    
        var $window = $(window);
        var dist = ($window.height()/2)-100;
        var prev = dist;
        var once = 'no';
    
        $window.on('scroll', function(){
    
          var createHeader = function() {
    
            var newHead = $('#masthead').clone();
    
            (newHead).prependTo('.extra-header').addClass('masthead-clone').animate({
              top: 0
            }).resize();
    
            $('.masthead-clone .site-branding').remove();
    
            $('.masthead-clone .btn-menu, .btn-close-menu').on('click', function() {
                $('.masthead-clone #mainnav-mobi').slideToggle(300);
                $(this).toggleClass('active');
            });
    
            $(document).on('click', '.masthead-clone #mainnav-mobi li .btn-submenu', function(e) {
                $(this).toggleClass('active').next('ul').slideToggle(300);
                e.stopImmediatePropagation()
            });
    
          } // End of function
    
          var scrollTop = $window.scrollTop();
          var thisPx = dist;
    
          if( scrollTop > thisPx ) {
    
            $('body').addClass('add-sticky-header');
    
            if( once == 'no' ) {
              $('body').prepend('<div class="extra-header" style="position:fixed; width:100%; top:-300px; left:0; z-index:9999;"></div>');
              createHeader();
    
              $('.extra-header').animate({
                top: 0
              }).show();
    
            }
    
            $('.extra-header').animate({
              top: 0
            }).show();
    
          }
    
          if( scrollTop > thisPx ) {
            once = 'yes';
          }
    
          prev = scrollTop;
    
          if( prev < dist  ) {
    
            $('body').removeClass('add-sticky-header');
    
            $('.extra-header').animate({
              top: -300
            }).hide();
    
          }
    
        });
    
      }
    
    })(jQuery);
    
    

    Then add this extra CSS code to Appearance > Customize > Additional CSS from dashboard.

    
    .extra-header {
      display: none;
    }
    
    .add-sticky-header .extra-header {
      display: block;
    }
    

    If site cache applied, you should flush it. Otherwise, the code addition won’t take any effect.

    https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

    Regards,
    Kharis

    Hi Kharis.

    Thank you very much. It works great. Except one little issue:
    When you scroll down then all the way up back to the initial header, the menu doesn’t open. Could you please take a look into it?

    Thanks

    Hello there,

    Please try adding this JS code and see if it helps.

    
    (function($){
    
      $(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
         $(this).toggleClass('active').next('ul').slideToggle(300);
         e.stopImmediatePropagation()
      });
      
    })(jQuery);
    

    Please note that you’re required to flush cache (if enabled).

    Regards,
    Kharis

    Hi Kharis.

    Thanks for providing the code.
    But it still doesn’t open every time when I scroll back to top of the page.

    Could you please look into it again.

    thanks

    Hello there,

    Please try replacing all the code with this one:

    
    (function($){
    
      if ( matchMedia( 'only screen and (max-width: 1023px)' ).matches ) {
    
        var $window = $(window);
        var dist = ($window.height()/2)-100;
        var prev = dist;
        var once = 'no';
    
        $window.on('scroll', function(){
    
          var createHeader = function() {
    
            var newHead = $('#masthead').clone();
    
            (newHead).prependTo('.extra-header').addClass('masthead-clone').animate({
              top: 0
            }).resize();
    
            $('.masthead-clone .site-branding').remove();
    
            $('.masthead-clone .btn-menu, .masthead-clone .btn-close-menu').on('click', function() {
                $('.masthead-clone #mainnav-mobi').slideToggle(300);
                $(this).toggleClass('active');
            });
    
            $(document).on('click', '.masthead-clone #mainnav-mobi li .btn-submenu', function(e) {
                $(this).toggleClass('active').next('ul').slideToggle(300);
                e.stopImmediatePropagation()
            });
    
          } // End of function
    
          var scrollTop = $window.scrollTop();
          var thisPx = dist;
    
          if( scrollTop > thisPx ) {
    
            $('body').addClass('add-sticky-header');
    
            if( once == 'no' ) {
              $('body').prepend('<div class="extra-header" style="position:fixed; width:100%; top:-300px; left:0; z-index:9999;"></div>');
              createHeader();
    
              $('.extra-header').animate({
                top: 0
              }).show();
    
            }
    
            $('.extra-header').animate({
              top: 0
            }).show();
    
          }
    
          if( scrollTop > thisPx ) {
            once = 'yes';
          }
    
          prev = scrollTop;
    
          if( prev < dist  ) {
    
            $('body').removeClass('add-sticky-header');
    
            $('.extra-header').animate({
              top: -300
            }).hide();
    
          }
    
        });
    
      }
    
    })(jQuery);
    
    (function($){
    
      $('.btn-menu, .btn-close-menu').on('click', function() {
          $('.masthead-clone #mainnav-mobi').slideToggle(300);
          $(this).toggleClass('active');
      });
    
      $(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
         $(this).toggleClass('active').next('ul').slideToggle(300);
         e.stopImmediatePropagation()
      });
      
    })(jQuery);
    

    Let me know how it goes.

    Regards,
    Kharis

    Hi Kharis.

    Thanks. But it still not responding when I scroll back to top …

    Hi Kharis

    I try on different mobile devices, it doesn’t work.
    A other suggestions?

    thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Mobile Scrolling Issues’ is closed to new replies.