Question

我有一个固定位置的导航栏，可以修复＆＃34;在移动/平板电脑设备上预定到页面底部而不是视口底部。

我知道较旧的移动操作系统/浏览器版本可能不支持固定定位，但我不相信这里的问题 - 使用iPad3（iOS6 +）在Chrome / Safari上测试和Kindle Fire上的Chrome（Android 4 +）。

每个固定位置元素都绑定到jQuery事件 - 根据元素的滚动或单击事件。我还没有读到导致问题的内容，但我已经将代码包含在内，以防有连接。

如果有人看到我失踪的东西，我非常感谢你的帮助。我试图避免使用jQuery解决方案，如果可能的话，从我读过的所有内容开始，这不应该成为当前设备的问题。

我已阅读了许多相关问题，并尝试了以下方法：

锁定视口可伸缩性：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

我使用了webkit转换和背面可视性：

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

我的CSS：

.main-links {
  display: none;
  position: fixed;
  bottom: .7em;
  width: 90%;
  margin-left: 5%;
  z-index:999999;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  }

jQuery的：

     var $mainLinks = $('.main-links');
     var $headerLogo = $('.header-logo');

 $(window).on('scroll', function(event) {
    if ($(this).scrollTop() > 200) {

  $mainLinks.fadeIn();
  $headerLogo.fadeIn();

} else {

  $mainLinks.hide();
  $headerLogo.hide();
}

Link to my working copy of the page in question

固定定位不适用于当前的iOS / Android设备？

0 个答案: