IPhone 6 - position: fixed - does not load until the scroll stops

Question

There are many posts on this site that I read, but nothing works for me, and I'm not sure why.

I'm trying to create a menu that “sticks” to the top of the page when you scroll it, and vice versa (stops sticking when scrolling up)

Javascript

$(document).ready(function(){ var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100)) document.addEventListener("scroll",Scroll,false); document.addEventListener("gesturechange",Scroll,false); function Scroll() { var y = $(this).scrollTop(); if (y >= top) { $('#FloatingMenu').addClass('fixed'); } else { $('#FloatingMenu').removeClass('fixed'); } 

CSS

  #FloatingMenu.fixed { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; background-color: black; color: red; } #FloatingMenu { background-color: red; color: black; width: 100%; text-align: center; } 

I tried to redraw, I tried to stop the “inertia” scrolling (which I cannot stop in Chrome on iOS). Anyway, everything I tried has the same results. Works great on PC or Android, but on the iPhone the menu will not be redrawn and “stuck” at the top until scrolling stops and the finger is removed from the screen.

Is there a fix for this? Everything that I read suggests that there is only one solution that has not changed anything for me.

The strange thing is: if your scroll up (the menu is already stuck at the top) and you scroll it, it automatically peels off (even when scrolling) and works fine.

The only time a problem occurs is when it is “repainted” by a “fixed” menu.

I hope there is a solution. Everything suggests that after iOS 8 it was fixed (and I'm testing 10+), but it will not show the menu while scrolling until you stop and release it. Tested on iPhone 6 and iPad Air 2. Safari and Chrome, the same results in all directions.

Answer 1

The problem is position:fixed . This is probably due to safari issues on mobile devices. After hours of searching, I believe that perhaps I was able to fix this problem.

The solution I used is to use position:-webkit-sticky for iOS safari and use position:sticky for desktop browsers. Further documentation on this property can be found here:

http://caniuse.com/#feat=css-sticky

You can try the following code:

CSS

  #FloatingMenu.fixed { top: 0; left: 0; z-index: 1; width: 100%; background-color: black; color: white; } #FloatingMenu { position: -webkit-sticky; position: sticky; background-color: lightgray; color: black; width: 100%; height: 60px; text-align: center; padding-top: 18px; font-weight: 800; } 

JS:

  $(document).ready(function(){ var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100)); window.addEventListener('scroll',Scroll,false); function Scroll() { var y = $(this).scrollTop(); if (y > top) { $('#FloatingMenu').addClass('fixed'); } else if (y<=top) { $('#FloatingMenu').removeClass('fixed'); } } }); 

Note that I completely removed the fixed property and applied the sticky property to the #FloatingMenu selector. It seems to work for me on my Safari for iOS and iPhone 6 Safari simulators, as well as Chrome and Safari on my desktop.

A simple working example of this fix can be found here : Link

Hope this helps. Greetings.

Answer 2

You should not add an event listener for scrolling, because it can create several errors - your browser may crash. This is the first thing you need to change:

JS:

 $(document).ready(function(){ var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100)); function Scroll() { var y = $(this).scrollTop(); if (y >= top) { $('#FloatingMenu').addClass('fixed'); } else { $('#FloatingMenu').removeClass('fixed'); } setInterval(function() { Scroll(); }, 120); }); 

The second thing you need to fix is ​​your scroll function. That's right: just a function that is called by the DOM element. But what if your event is not triggered by a DOM element ? Maybe your problem! Therefore, you can even try adding an Event Listener to scroll by simply fixing this, but I do not recommend it.

Js

  function Scroll() { var y = $('body').scrollTop(); if (y >= top) { $('#FloatingMenu').addClass('fixed'); } else { $('#FloatingMenu').removeClass('fixed'); } 

ATTENTION:

If the first scrollable parent element of #FloatingMenu is not <body> , you should fix this $('body') .

Answer 3

I think I solved this issue.
This is pretty funny.
Just add to your CSS file

 transform: scaleX(1); 

And all this

 .fixedSidebar{ position: fixed; right:0; border:1px solid gray; height:100vh; width:17%; max-width:70px; transform: scaleX(1); }