Фиксированная навигационная панель позиции активируется только один раз в Mobile Safari на iOS5 - PullRequest
Новая
       24

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

25 голосов
/ 19 октября 2011

Я использую Twitter Bootstrap для стилизации сайта, оптимизированного для iPad, и столкнулся с интересной ошибкой в ​​Mobile Safari на iOS 5.

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

Проблема, по-видимому, в самом 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>

Ответы [ 3 ]

33 голосов
/ 05 апреля 2012

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

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

2 голосов
/ 22 июня 2012

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

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

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

0 голосов
/ 29 декабря 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...