0

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

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

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

屏幕截图：

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

屏幕截图 1 - 放大

未放大：

屏幕截图 1 - 放大
（来源：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>
4

3 回答 3

4

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

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

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

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

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

于 2012-06-30T04:41:37.157 回答
3

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

然而，它可以很容易地用几行 javascript 来修复。如何做到这一点的一个例子：

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

看看这个问题：

固定移动 Safari 中的定位

于 2012-06-30T06:51:09.153 回答
0

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

于 2014-04-24T08:44:16.103 回答