Question

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

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

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

截屏：

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

screen shot 1 - zoomed in http://briangarson.com/screen1.png

未放大：

screen shot 1 - zoomed in http://briangarson.com/screen2.png

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

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

Answer 1

我从来没有遇到任何固定定位问题，主要是因为我没有使用它，这说：我不认为移动浏览器支持position:fixed。我相信您需要像以下一样 - ＆gt;

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

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

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

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

Answer 2

位置：固定;由于可能会破坏较旧的桌面网站，因此无法在移动设备上正常运行。支持我所知道的位置固定的唯一移动浏览器是iOS 5 +上的移动版Safari。

然而，它可以通过几行javascript轻松修复。如何做到的一个例子：

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

看看这个问题：

Fixed positioning in Mobile Safari

Answer 3

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

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

3 个答案: