Support » Theme: Sydney » Mobile Scrolling down Issues

  • Resolved MooK

    (@kubelyan)


    Hi.

    There is scrolling-down issue on mobile devices (I use an iPhone for testing).
    You can see it on this link
    And I also use following code for fixed menu:

    @media only screen and (max-width: 767px){
      .site-header.float-header {
        position: fixed !important;
        top: 0 !important;
      }
      .site-header.float-header .site-logo {
        display: none;
      }
    }

    If you start to scroll down, you can see how screen jumps to the bottom of the slider, skipping its entire content. I tested also on some pages with a regular banner; it does the same thing: jumping down.
    Is it possible to make the scrolling smoother, like it works on the desktop view?

    Thanks

Viewing 5 replies - 16 through 20 (of 20 total)
  • Thread Starter MooK

    (@kubelyan)

    Hi @kharisblank

    Thank you so much for the solution.
    It jumps less then before.
    I added the code below in order to hide the logo.

    @media only screen and (max-width: 767px){
      .site-header.float-header .site-logo {
        display: none;
      }
    }

    But there is only one issue, when you click on the menu icon the menu doesn’t open…

    Hello there,

    I am sorry, the code was buggy. Please try replacing the jQuery code I suggested at the 3rd step with this one:

    
    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();
    
              $('.btn-menu').on('click', function() {
                  $('#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()
              });          
              
              inserated = true;
              
            }    
            
          } else {
          
            $('.masthead-clone').animate({
              top: -200
            }).remove();
            inserated = false;
            
          }
    
        });
      
      }
    
    });
    

    Regards,
    Kharis

    Thread Starter MooK

    (@kubelyan)

    Hi @kharisblank

    It works great!!!
    You are the BEST!
    Thanks you very very very much! 🙂

    You’re welcome!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

    Thread Starter MooK

    (@kubelyan)

    hi Kharis Sulistiyono (@kharisblank)

    Could you please take a look into the code.
    Before to start scrolling if you click on the mobile menu it opens and close by itself right away…

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Mobile Scrolling down Issues’ is closed to new replies.