19

I have a bar that is fixed to the bottom of every page on my website by using position:fixed. The problem is that on devices like iPhone or iPad this property is not respected.

I tried to use javascript to detec the screen height, scroll position, and this works perfectly on the iPad:

$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" );  } );

As you can see I'm using jQuery. The problem is that this code does not quite work on the iPhone because the window's height does not include the location bar (and also the debug bar if present), so the bar goes on the right place at first, but as you scroll it gets fixed above the right position (the amount of pixels used by Mobile Safari's location bar).

Is there a way to get this information and properly fix this toolbar?

Have in mind this is not a website made for iPhone, so I can't use tricks like iScroll at all.

3
  • 2
    +1 for iPad compatible code. I'll be watching here for answers :)
    – Dan Hanly
    Mar 23, 2011 at 18:07
  • It seems that iOS 5 solved these issues by correctly interpreting position:fixed elements.
    – Wes Souza
    Sep 7, 2011 at 23:04
  • Perhaps when it comes out of Beta I'll have a look.
    – Dan Hanly
    Sep 8, 2011 at 15:11

10 Answers 10

3

Since iOS 8.4, you can use position: sticky; respectively position: -webkit-sticky; to fix this.

1
  • 5
    Sticky position is for elements to scroll with static position until reaching the top of the window, and then fixing them there. This question is for fixing an element to the bottom of the window.
    – 2540625
    Mar 2, 2020 at 1:22
1

I can only point you in some directions:

3
  • 4
    Interesting how two of those links tell me to just give up, I wonder if this is achievable at all.
    – Wes Souza
    Mar 23, 2011 at 20:55
  • 2
    If you find a solution please let us know, you can answer your own questions in SO. Mar 24, 2011 at 10:31
  • 1
    distill.engineyard.com/archive#home. This site's persistant header is the least buggy I have seen. Maybe there is something they are doing that solves the issue? Nov 29, 2013 at 7:17
1

I just did something like this, sticking the navigation to the TOP of the window. The nav starts below the header then sticks if you scroll passed it. iOS5 does support fixed positioning. The item will snap to position AFTER scroll ends, but still works well. '#sticky-anchor' is a wrapper div around my navigation.

Don't recall where I found all this, got little pieces from many sites. You can adjust it to fit your needs.

$(window).scroll(function(event){

// sticky nav css NON mobile way
   sticky_relocate();

   var st = $(this).scrollTop();

// sticky nav iPhone android mobile way
// iOS 4 and below

   if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
        //do nothing uses sticky_relocate above
   } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) {

        var window_top = $(window).scrollTop();
        var div_top = $('#sticky-anchor').offset().top;

        if (window_top > div_top) {
            $('#sticky').css({'top' : st , 'position' : 'absolute' });
        } else {
            $('#sticky').css({'top' : 'auto' });
        }
    };
};
1

I fixed this on my site, and answered this on Stack Overflow. Since then I've gotten a ton of thanks from people who have implemented it. Sorry I don't have time for a summary.

https://stackoverflow.com/a/10030251/1118070

0

This bit of jquery code worked for me:

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
    $("#footer_menu").css("position", "fixed").css("top", $('window').height());
};

otherwise the css for #footer_menu was:

position:fixed;
bottom:0;
width:100%;
padding:5px 0;
text-align:center;
height:44px;

I think setting the height helped with rendering properly and on a desktop browser I wanted this menu fixed to the bottom of the browser window.

0

Try hiding/displaying the bottom fixed nav on iPhone based on the window.innerHeight. Whenever the toolbars are displaying, usually when you scroll up, you can display the bottom nav and hide it when scrolling down, when the toolbars hide.

You can use a code like this:

    var windowHeight = {
  small: window.innerHeight,
  middle: window.innerHeight,
  big: window.innerHeight
}
window.addEventListener('resize', function(){
  var currentHeight = window.innerHeight;
  if (currentHeight < windowHeight.small) {
    windowHeight.small = currentHeight;
  }

  if (currentHeight > windowHeight.big) {
    windowHeight.big = currentHeight;
  }

  console.log('windowHeight.small', windowHeight.small, 'windowHeight.middle', windowHeight.middle, 'windowHeight.big', windowHeight.big, 'currentHeight', currentHeight);

  if (currentHeight === windowHeight.big) {
    transform(stickyNav, 'translate3d(0,120%,0)');
    console.log('Hide bottom nav on big screen!');
  } else if (currentHeight === windowHeight.middle) {
    transform(stickyNav, 'translate3d(0,0,0)');
    console.log('Show bottom nav on middle screen!');
  } else {
    transform(stickyNav, 'translate3d(0,-100%,0)');
    console.log('Display bottom nav high up on smaller screen!');
  }
})

The transform(stickyNav, 'translate3d(x,x,x)') function is a simple function taking in the bottom nav and then applying a transform in order to hide/display an item placed at the bottom.

0

I remember solving this using position: sticky; bottom: 0; for a container element with zero height, then using position: absolute; bottom: var(--how-much-space-u-like-below-bottom-of-screen-and-fixed-element); on the actual thing you'd like fixed to the bottom of the viewport. I believe it solved the issue at least on iOS Safari 15 and 16.

<div class="sticky-container" style="position: sticky; bottom: 0;">
  <div class="fixed-to-bottom" style="position: absolute; bottom: 1rem;">
    <button>hello world</button>
  </div>
</div>
0

I used paddingBottom: 'env(safe-area-inset-bottom)',

New contributor
Viktoria Hakobyan is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Apr 12 at 13:04
-1

iScroll probaply is the easiest solution to your problem. Contrary to your believe it also works for android and opera. The new version of it is performing superb.

http://cubiq.org/iscroll-4

-3

Thank Google, not me:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Pretty simple, actually.

3
  • As I've mentioned since the begining: "Have in mind this is not a website made for iPhone, so I can't use tricks like iScroll at all." This is exactly that trick.
    – Wes Souza
    Mar 30, 2011 at 16:53
  • 1
    The code from Google is a good starting point. However, I think it's buggy (I think the line that reads this.element = this; should be this.element = element;) and it's incomplete (several key functions are left "as exercises for the reader"). Getting the details of momentum, bounce, etc EXACTLY right are REALLY important, and that's what's been left out. I'd love to see an implementation of the missing methods! May 10, 2011 at 20:25
  • 3
    The link featured in this answer is now dead. Aug 8, 2015 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.