Title: Mobile Scrolling Issues
Last modified: November 1, 2017
---
# Mobile Scrolling Issues
* [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 7 months ago](https://wordpress.org/support/topic/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)
* [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
* (@kharisblank)
* [8 years, 7 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9642574)
* Hello there,
* Please share your site URL here, so I can have a closer look.
* Regards,
Kharis
* Thread Starter [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 7 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9648164)
* Hi Kharis.
* I was testing it on [here](http://www.rosedemo.website/00/).
* 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
* [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
* (@kharisblank)
* [8 years, 7 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9649671)
* Hello there,
* Please share a link where you got that code from.
* Regards,
Kharis
* Thread Starter [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 7 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9657002)
* Hi Kharis (@kharisblank).
* the code is from [here](http://rosedemo.website/240) (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](http://www.rosedemo.website/00/) to work the same way.
* thanks
* Thread Starter [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9689891)
* Hi Kharis.
Sorry for bothering you, but any updates?
* thanks
* [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
* (@kharisblank)
* [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9692579)
* 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('');
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](https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens)
* Regards,
Kharis
- This reply was modified 8 years, 6 months ago by [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/).
* Thread Starter [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9730130)
* 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? ](http://www.rosedemo.website/00/)
* Thanks
* [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
* (@kharisblank)
* [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9731301)
* 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
* Thread Starter [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9731903)
* 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
* [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
* (@kharisblank)
* [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9732542)
* 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('');
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
* Thread Starter [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9734305)
* Hi Kharis.
* Thanks. But it still not responding when I scroll back to top …
* Thread Starter [MooK](https://wordpress.org/support/users/kubelyan/)
* (@kubelyan)
* [8 years, 5 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9790579)
* 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.
* 
* Ignis
* [Support Threads](https://wordpress.org/support/theme/ignis/)
* [Active Topics](https://wordpress.org/support/theme/ignis/active/)
* [Unresolved Topics](https://wordpress.org/support/theme/ignis/unresolved/)
* [Reviews](https://wordpress.org/support/theme/ignis/reviews/)
* 12 replies
* 2 participants
* Last reply from: [MooK](https://wordpress.org/support/users/kubelyan/)
* Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/mobile-scrolling-issues/#post-9790579)
* Status: not resolved