fixed positioning for a floating menu to support mobile browsers

Question

I'm a C# .NET developer however terrible at CSS although I do put in a good effort before asking questions. I'm using some basic jQuery, CSS and HTML Tables (yes I know tables) to build out my only photo portfolio that was previously in flash. The issue I'm having is when viewing the website on a mobile device like an iPhone or Android, in my case screen shots with a Galaxy S3, if the user zooms in on the photos the menu that I've fixed positioned moves over top of the photos.

EDIT: I'm using the fixed position so that the menu "floats" in the same place over the photos, and follows the scroll bar as the user scrolls, making it accessible as the user scrolls to the end of the photos. I've updated the CSS to the 1st response, however the menu no longer remains on screen as you scroll. I should have originally included this note in the post.

Link to the website: http://briangarson.com

Screen shots:

user zoomed in by pinching - the menu floats overtop of the images:

Not zoomed in:

_{(source: briangarson.com)}

The code I'm using (probably easier to simply view source on my website) but here goes

<style type="text/css">
body
{
    background-color: #FFFFFF;
}

.gallery
{
    height: 600px;
}

#content{
    margin-top: 50px;
}

#menu{
    margin-left: 15px;
    position: fixed;
}
table{
padding-top: 90px;
}
td{
    padding-left: 15px;
}
a{
color:#1A1A1A;
}
a.on{
    text-decoration: none;
}
</style>

and the HTML

<div id="content">
    <div id="menu">
        <img  src="http://briangarson.com/logo.gif"> <a id="navSkate" class="on" href="#">Skate</a> | <a id="navMusic" href="#">Music</a> | <a id="navFashion" href="#">Fashion</a> | <A target=_blank href="mailto:photo@briangarson.com">Info</a>
    </div>
    <table>
    <tr id="fashion">
      <td><img class="gallery" src="photos/352cassandra_aylmer.jpg"></td>
      <td><img class="gallery" src="photos/811for_web_low_res_texture_0141-editweb.jpg"></td>
      <td><img class="gallery" src="photos/78420061105031421_carolina_01_floor_srgb.jpg"></td>
      <td><img class="gallery" src="photos/91720061127164637_kat_salute_srgb_01.jpg"></td>
      <td><img class="gallery" src="photos/997val__1262555511_4af982f854_o.jpg"></td>
      <td><img class="gallery" src="photos/43620060531234234_geoff.jpg"></td>
      <td><img class="gallery" src="photos/918christine_dsc_8737.jpg"></td>
      <td><img class="gallery" src="photos/471debbie.jpg"></td>
      <td><img class="gallery" src="photos/158alison_dsc_0602-edit.jpg"></td>
      <td><img class="gallery" src="photos/95madelaine_bw.jpg"></td>
      <td><img class="gallery" src="photos/971gabrielle_v3_bordered.jpg"></td>
      <td><img class="gallery" src="photos/917ioanna_dsc_1937-edit.jpg"></td>
      <td><img class="gallery" src="photos/96520061106010418_carolina_couch_01_srgb.jpg"></td>
      <td><div style="display: block; width:100px;">&nbsp;</div></td>
    </tr>
    </table>
</div>

score 3 · Answer 1 · answered Jun 30 '12 at 04:41

3

I've never had any issues with fixed positioning, mostly because I don't use it, that being said: I don't think mobile browsers support position:fixed. I believe that you need to it like the following ->

#menu{
    margin-left: 15px
    position: absolute;
        top:50px;   
}

The purpose of the above is to maintain the same distance from the top that it would have been, had it been bound to the dimensions of <div id="content>. Now we can replicate this by binding to the scroll event.

$(document).scroll(function(){
  $('#menu').css('top', '50px');
});

I believe this is the effect you're going for.

answered Jun 30 '12 at 04:41

Ohgodwhy

49,779
11
80
110

this seems to fix the issue with the zooming however I've lost the "stickyness" or floating of the menu that would follow the photos as I scroll to the right – Brian Garson Jun 30 '12 at 10:33
any chance at some help with keeping the menu present as you scroll? – Brian Garson Jul 03 '12 at 01:30

score 3 · Answer 2 · edited May 23 '17 at 12:09

position: fixed; doesn't work properly on mobile devices due to the possibility of breaking older desktop sites. The only mobile browser that supports position fixed that I'm aware of is mobile safari on iOS 5+.

However it can easially be fixed with a few lines of javascript. An example of how it could be done:

window.onscroll = function() {
    document.getElementById('fixedDiv').style.top =
        (window.pageYOffset + window.innerHeight - 25) + 'px';
};

Take a look at this question:

Fixed positioning in Mobile Safari

score 0 · Answer 3 · answered Apr 24 '14 at 08:44

0

With the new ios safari and Chrome phone browser {position:fixed} works fine. But You still need have to add ployfill for old browsers.

answered Apr 24 '14 at 08:44

РАВИ

11,467
6
31
40

fixed positioning for a floating menu to support mobile browsers

3 Answers3