Подтвердить что ты не робот

Фиксированная позиция navbar доступна только один раз в Mobile Safari на iOS5

Я использую Twitter Bootstrap, чтобы создать оптимизированный веб-сайт iPad, и я столкнулся с интересной ошибкой в ​​Mobile Safari на iOS5.

После нажатия на привязную ссылку в фиксированной позиции navbar, она вернет меня к этому якорю. Тем не менее, я не могу нажимать на какие-либо другие ссылки в навигационной панели до тех пор, пока не прокручу страницу.

Проблема, кажется, в самом 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>
4b9b3361

Ответ 1

Я чувствую твою боль. Я потратил не менее 6 часов, пытаясь понять это. Но я сделал, по крайней мере, сладкое обходное решение, которое сработало для меня.

У меня есть фиксированный заголовок с навигацией в нем, как и у многих заголовков. Тело /html прокручивается вниз под ним. (типичный)

После нажатия кнопки nav, страница прокручивает и эффективно убивает мои кнопки, пока я физически не прокручу мое тело пальцем. Это как-то снова делает мои кнопки доступными. Я пробовал все, и никто, казалось, не решил его или не поделился результатами.

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 В настоящее время я нахожусь в процессе, поэтому я обычно не буду подключать к нему какие-либо ссылки, но эй по доброй причине.

Ответ 2

Здесь есть решение: http://xybrary.appspot.com/.

Я не говорю, что это лучший, но не смог найти что-то еще лучше. Попробовали решение @Ryan Ore, посетив его веб-сайт на iOS 5.1, и его проблема не исправлена ​​вообще.

В принципе, были созданы два фиксированных навигатора, первый с фиксированным позиционированием и большим z-индексом, второй, абсолютный и нижний z-индекс (разумеется, другой класс CSS). Таким образом, оригинал и дубликат накладываются друг на друга.

Ответ 3

У меня была такая же проблема. Вам нужно применить padding-top не менее 40px к тегу <body> или к любому элементу непосредственно перед вашей панелью (панель навигации или верхняя панель).