固定位置导航栏只能在iOS5上的Mobile Safari中单击一次 [英] Fixed position navbar only clickable once in Mobile Safari on iOS5
问题描述
我正在使用Twitter Bootstrap为iPad优化的网站设计样式，并且在iOS5上的Mobile Safari中遇到了一个有趣的错误。
I'm using Twitter Bootstrap to style an iPad optimized website and am running up against an interesting bug in Mobile Safari on iOS5.
点击锚点链接后在固定位置导航栏中，它正确地将我带到那个锚点。但是，在滚动页面之前，我无法点击导航栏中的任何其他链接。
After tapping on an anchor link in the fixed position navbar, it correctly takes me to that anchor. However, I am then unable to click on any other links in the navbar until after I have scrolled the page.
问题似乎出现在Bootstrap本身，因为Bootstrap网站有同样的问题： http://twitter.github.com/bootstrap/
The problem appears to be in Bootstrap itself, since the Bootstrap site has the same issue: http://twitter.github.com/bootstrap/
有关如何解决此问题的任何建议吗？
Any suggestions for how to work around this?
以下代码复制问题。请注意，如果您单击Test JS或Test jQuery（两种不同类型的滚动，直接JS或基于jQuery），则在手动移动页面之前，您将无法再次单击。
The code below reproduces the issue. Note if you click on the "Test JS" or "Test jQuery" (two different types of scrolling, straight JS, or jQuery based) you will not be able to click again until after you manually move the page.
这是基本的演示代码（.jsp）：
Here is the basic demo code(.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>
推荐答案
我感到痛苦。我花了至少6个小时试图弄清楚这个。但我做到了，至少有一个对我有用的甜蜜解决方法。
I feel your pain. I spent at least 6 hours trying to figure this one out. But I did, at least a sweet workaround that worked for me.
我有一个固定的标题，其中包含许多标题的导航。 body / html向下滚动到它下面。 （典型的）
I have a fixed header with navigation in it as many headers have. The body/html scrolls up down underneath it. (typical)
单击导航按钮后，页面会滚动并有效地杀死我的按钮，直到我用手指再次滚动身体。这以某种方式使我的按钮再次可点击。我尝试了一切，似乎没有人解决它，或者没有分享结果。
After clicking a nav button, the page scrolls and effectively kills my buttons until I physically scroll my body again with my finger. This somehow makes my buttons clickable again. I tried everything and nobody seemed to have solved it , or didn't share results.
html ::
在我的容器div的末尾，我添加了一个没有高度/宽度的空div
html:: At the end of my container div, i added an empty div, with no height/width
<div id="device"></div>
</div> <!--! end of #container -->
js ::
就在滚动动画之前，我给div高度200px。
js:: Just before the scroll animation, i give the div height of 200px.
$('#device').css('height', '200px');在动画完成后立刻消耗高度
immediately on complete of the animation, i take the height away
$('#device').css('height', '0px'); 就是这样。甜蜜的黑客魔法。我希望有所帮助。
如果你想要一个有效的例子，请 http://ryanore.com
目前我在进展所以我通常不会驱动它的任何链接，但嘿，这是一个很好的原因。
That is it. Sweet hack magic. I hope that helps. If you want a working example, http://ryanore.com Currently I'm in progress so I wouldn't normally drive any links to it, but hey it's for a good cause.
这篇关于固定位置导航栏只能在iOS5上的Mobile Safari中单击一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
