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

虽然我在提问之前付出了很大的努力，但我是一位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:[email protected]">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>

来源

2012-06-30 Brian Garson

我从来没有与固定定位的任何问题，主要是因为我不使用它，这是说：我不认为移动浏览器支持position:fixed。我认为，你需要像下面 - >

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

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

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

我相信这是你要做的效果。

来源

2012-06-30 04:41:37 Ohgodwhy

这似乎解决了缩放的问题，但我已经失去了“粘性”或菜单的浮动将跟随照片，因为我滚动到右边的 –

任何机会在一些帮助保持菜单作为你滚动？ –

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

但是，它可以很容易地用几行javascript来修复。它可以如何做一个例子：

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

看看这个问题：

Fixed positioning in Mobile Safari

来源

2012-06-30 06:51:09

有了新的IOS Safari和Chrome手机浏览器{位置：固定}工作正常 。但您仍然需要为旧浏览器添加ployfill。

来源

2014-04-24 08:44:16 ravi

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

回答

相关问题