固定浮动菜单的定位以支持移动浏览器答案

【问题标题】：fixed positioning for a floating menu to support mobile browsers固定浮动菜单的定位以支持移动浏览器
【发布时间】：2012-06-30 03:58:18
【问题描述】：

我是一名 C# .NET 开发人员，但在 CSS 方面很糟糕，尽管在提问之前我确实付出了很大的努力。我正在使用一些基本的 jQuery、CSS 和 HTML 表格（是的，我知道表格）来构建我以前在 flash 中的唯一照片组合。我遇到的问题是在 iPhone 或 Android 等移动设备上查看网站时，在我的情况下，使用 Galaxy S3 进行屏幕截图，如果用户放大照片，我固定位置的菜单会移到顶部照片的。

编辑：我使用固定位置，以便菜单“浮动”在照片上的同一位置，并在用户滚动时跟随滚动条，使其在用户滚动到照片末尾时可访问.我已将 CSS 更新为第一个响应，但是当您滚动时菜单不再保留在屏幕上。我最初应该在帖子中包含此注释。

网站链接：http://briangarson.com

屏幕截图：

用户通过捏合放大 - 菜单漂浮在图像上方：

未放大：

_{（来源：briangarson.com）}

我正在使用的代码（可能更容易在我的网站上简单地查看源代码）但是这里有

<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>

和 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>

【问题讨论】：

标签： jquery html css mobile css-position

【解决方案1】：

我从来没有遇到过固定定位问题，主要是因为我不使用它，也就是说：我认为移动浏览器不支持position:fixed。我相信你需要像下面这样 ->

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

上面的目的是保持与顶部相同的距离，如果它被绑定到<div id="content> 的尺寸。现在我们可以通过绑定到滚动事件来复制它。

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

我相信这就是你想要的效果。

【讨论】：

这似乎解决了缩放问题，但是当我向右滚动时，我失去了跟随照片的菜单的“粘性”或浮动
在滚动时保持菜单存在的任何帮助？

【解决方案2】：

位置：固定；由于可能会破坏旧的桌面站点，因此无法在移动设备上正常工作。据我所知，唯一支持定位的移动浏览器是 iOS 5+ 上的移动 safari。

但是，它可以通过几行 javascript 轻松修复。一个如何完成的例子：

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

看看这个问题：

Fixed positioning in Mobile Safari

【讨论】：

【解决方案3】：

使用新的 ios safari 和 Chrome 手机浏览器 {position:fixed} 可以正常工作。但是您仍然需要为旧浏览器添加 ployfill。

【讨论】：