固定位置导航栏只能在iOS5的移动Safari中单击一次

我正在使用Twitter Bootstrap设计iPad优化网站的样式，并针对iOS5 Mobile Safari中的一个有趣错误运行。固定位置导航栏只能在iOS5的移动Safari中单击一次

点击固定位置导航栏中的锚链接后，它正确地将我带到该锚点。但是，在滚动页面之前，我无法单击导航栏中的任何其他链接。

的问题似乎是在引导本身，因为引导网站有同样的问题：http://twitter.github.com/bootstrap/

对于如何解决这个有什么建议？

下面的代码重现了这个问题。请注意，如果您点击“测试JS”或“测试jQuery”（两种不同类型的滚动，直线JS或基于jQuery），您将无法再次单击，直到手动移动页面为止。

下面是基本的演示代码（.JSP）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      #testDiv { 
       position: fixed; 
       bottom: 0; 
       right: 0; 
       background: gray; 
       padding: 20px; 
      } 
      #jsDiv, 
      #jQueryDiv { 
       width: 200px; 
       display: block; 
       height: 40px; 
       background-color: red; 
      } 
      #jQueryDiv { 
       background-color: yellow; 
      } 
     </style> 
     <script type="text/javascript"> 
      function testScroll() { 
       alert("JS"); 
       scroll(0, 5000); 
      } 
      function testjqScroll() { 
       alert("JQuery"); 
       $(window).scrollTop(500); 
      } 
     </script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script> 
    </head> 
<body> 
    <%for (int i = 0; i < 500; i++) {%> 
    Line <%=i%><BR/> 
    <%}%> 
    Bottom 
    <div id=testDiv> 
     <a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a> 
     <a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a> 
    </div> 
</body> 
</html>

来源

2011-10-19 Joshua Clanton

我遇到同样的问题。目前还没有解决方案。 – Stuiterbal

我有类似的问题。任何人？ – emilolsson

-2

我有同样的问题。您需要在<body>标记或紧邻您的栏（导航栏或顶栏）之前的任何元素上应用padding-top至少40px。

来源

2011-12-29 19:53:13 Pabluez

我感到你的痛苦。我花了至少6个小时试图找出这一个。但我确实，至少有一个甜蜜的解决方法，对我来说很有效。

我有一个固定的标题，其中包含许多标题的导航。 body/html在它下面向下滚动。（典型）

点击导航按钮后，页面会滚动并有效杀死我的按钮，直到我用手指再次实际滚动身体为止。这不知何故使我的按钮再次点击。我尝试了一切，似乎没有人解决它，或者没有分享结果。

HTML :: 在我的容器div的结束，我添加了一个空div，没有高度/宽度

<div id="device"></div> 

</div> <!--! end of #container -->

JS :: 只需滚动动画之前，我给div的高度为200px。

$('#device').css('height', '200px');

立即完成的动画，我拿的高度远

$('#device').css('height', '0px');

这就是它。甜蜜的魔法。我希望有所帮助。如果你想要一个工作的例子，http://ryanore.com 目前我正在进行，所以我通常不会驱动任何链接，但嘿它是一个很好的原因。

来源

2012-04-05 14:11:03

应该指出的是，这个数字'200px'是任意的，似乎在我的情况下运作良好。你可能需要摆弄这个价值，直到你认为有用的东西。 –

FWIW，这不适合我。这样一个烦人的错误！ – weotch

为我工作，最好修复那里。谢谢！ – Mac

这里有一个解决方案：http://xybrary.appspot.com/。

我不是说这是最好的，但没有找到更好的东西。通过在iOS 5.1上访问他的网站尝试了@Ryan Ore的解决方案，他的问题根本不是固定的。

基本上，已经创建了两个固定的navbars，第一个固定位置和更大的z-索引，第二个绝对位置和更低的z-索引（当然，不同的CSS类）。所以原始文件和副本是分层叠加的。

来源

2012-06-22 12:45:41 Chris

我很高兴你发布了这个实际上，我不知道为什么我的工作不再为我工作。我想我可能会无意中盗用我的代码。我知道它在一段时间内工作很好。将回报。 –

是的，我实际上欺骗了我的CSS，现在又在工作。我不知道为什么它不适合你，但我很高兴你找到了另一种解决方法。我没有尝试过，但嘿，如果它的作品真棒。 –

谢谢你让我们知道@Ryan Ore。我很确定人们现在可以研究你的方法并完成它，我会看看我自己以及我很好奇。 – Chris

固定位置导航栏只能在iOS5的移动Safari中单击一次

回答

相关问题