Question

我正在使用Twitter Bootstrap为iPad优化的网站设计样式，并在iOS5上的Mobile Safari中遇到一个有趣的错误。

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

问题似乎出现在Bootstrap本身，因为Bootstrap网站存在同样的问题：http://twitter.github.com/bootstrap/

有关如何解决此问题的任何建议吗？

以下代码重现了该问题。请注意，如果您单击“Test JS”或“Test 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>

Answer 1

我感觉到你的痛苦。我花了至少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 目前我正在进行中，所以我通常不会开启任何链接，但是嘿，这是有充分理由的。

Answer 2

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

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

基本上，已经创建了两个固定的导航栏，第一个具有固定的定位和更大的z索引，第二个是绝对定位和较低的z索引（当然，不同的CSS类）。因此，原始副本和副本在彼此之上分层。

Answer 3

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

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

3 个答案: