CODEWITHSUNDEEP
javascriptcssiphone
DerekConlon
DerekConlon

Reputation: 463

iPhone 6 - position: fixed - not loading until stop scrolling

There are a lot of posts on this site that I have read but nothing is working for me and I'm not sure why.

I'm trying to make a menu that "sticks" to the top of the page as you scroll past it and vice versa (stops sticking when you scroll back 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've tried doing repainting, i've tried stopping the "inertia" scrolling (which I can't get to stop on Chrome on iOS) Either way, everything I've tried has the same results. Works perfectly in a PC or on a Android, but on an iPhone, the menu will not repaint and be "stuck" at the top until the scrolling stops AND the finger is removed from the screen.

Is there a fix for this? Everything I'm reading suggests that there is but notn a single solution has changed anything for me.

The strange thing is, if your scrolling back up (the menu is already stuck at the top) and you scroll past it, it auto un-sticks (even while scrolling) and works fine.

The only time its a problem is when its "repainting" the "fixed" menu.

I hope there is a solution. Everything suggests that after iOS 8 it was fixed (and i'm testing on 10+) but It wont show the menu while scrolling until you stop and let go. Tested on an iPhone 6 and and iPad Air 2. safari and chrome, same results across the board.

Upvotes: 5

Views: 3290

Answers (3)

Alexander Bokov
Alexander Bokov

Reputation: 51


I think I solved this question.
It's pretty funny.
Just add to style transform

transform: scaleX(1);

Or

transform: translateX(0);

And it's all

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

Upvotes: 3

Kaique Garcia
Kaique Garcia

Reputation: 528

You shouldn't add any event listener for scrolling because it can produce several errors - maybe crashing your browser. 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 "function Scroll". It's right: just a function maded to be called by a DOM element. But what if your event isn't triggered by a DOM element? Maybe that's your problem! So you can even try adding Event Listener for scrolling just fixing that, but I don't recommend.

JS

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

PAY ATENTION:

If the first scrollable parent of #FloatingMenu isn't the <body>, you should fix that $('body').

Upvotes: 0

Gurtej Singh
Gurtej Singh

Reputation: 3234

The problem is with position:fixed. This seems to have known issues with safari specifically on mobile devices. After doing some searches for hours, I believe that I may have been able to fix this issue.

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

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

Can you please 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');
        }
    }
  });

Please note that I have removed the fixed property completely and applied the sticky property to the #FloatingMenu selector itself. Seems to work for me on my iOS simulator safari, and iPhone 6 Safari and on Chrome & Safari in my desktop.

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

Hope this helps. Cheers.

Upvotes: 0

Related Questions