25

我正在使用 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>
4

3 回答 3

33

我感觉到你的痛苦。我花了至少 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-05T14:11:03.173 回答
2

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

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

基本上，已经创建了两个固定导航栏，第一个具有固定定位和更大的 z-index，第二个是绝对定位和较低的 z-index（当然，不同的 CSS 类）。因此，原件和副本是相互叠加的。

于 2012-06-22T12:45:41.653 回答
-2

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

于 2011-12-29T19:53:13.920 回答