Mobile Scrolling down Issues

  • Resolved MooK

    (@kubelyan)


    7 years, 4 months ago

    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.