固定定位在当前iOS/Android设备上不起作用？

我有一个固定位置导航栏，它“固定”在页面底部，而不是移动/平板设备上预期的视口底部

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

每个固定位置元素都绑定到一个jQuery事件——滚动或单击事件，具体取决于元素。我没有读到导致问题的代码，但我已经包含了代码，以防出现连接

如果有人看到我遗漏了什么，我会非常感谢你的帮助。我试图尽可能避免使用jQuery解决方案，因为从我所阅读的所有内容来看，这不应该是当前设备的问题

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

锁定视口可伸缩性：

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

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

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

     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();
}

我的CSS:

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

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

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

     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();
}

jQuery:

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

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

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

     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();
}

---

我猜jquery妨碍了它的工作，移动设备浏览器与pc的浏览器不同，它们是“lite”版的真实浏览器，无法运行所有内容，尽管固定位置应该可以正常工作，尝试删除仅适用于移动设备的jquery即可。@Exclusive3-感谢您的反馈，但我想在某个地方有一个具体的问题/冲突。不过，作为测试，我删除了所有jQuery脚本，并添加了内联CSS作为display:block to.main链接。仍然固定到页面而不是视口。