Как Bootstrap удается использовать фиксированное позиционирование для navbar на iOS?

Я заметил, что даже на iOS, Bootstrap's navbar умудряется оставаться в верхней части окна с позиционированием fixed. Несмотря на то, что я думал, что это было невозможно, без повторной реализации прокрутки iOS?Как Bootstrap удается использовать фиксированное позиционирование для navbar на iOS?

Мне было интересно, как это сработало и как я могу это сделать для своих собственных взглядов? Ничто из того, что я пробовал, похоже, работает - div смещается при прокрутке и только прыгает в положение после прокрутки.

EDIT: Вот минимальный пример (ish!). Посмотрите, как на iOS fixedThing вскакивает, когда вы прокручиваете вниз. Возможно, это как-то связано с взаимодействием с navbar?

<html> 
    <head> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <style> 
      @import url('http://getbootstrap.com/dist/css/bootstrap.css'); 

      .fixedThing { 
       position: fixed; 
       width: 100%; 
       height: 100%; 
       background: red; 
       opacity: 0.5; 
      } 

      .navbar { 
       width: 100%; 
      } 
     </style> 

     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> 

    </head> 
    <body> 

     <div class="navbar navbar-inverse navbar-fixed-top"> 

     </div> 

     <div class="fixedThing"></div> 

     <p>...insert lots of page content so it scrolls ...</p> 

    </body> 
</html>

http://jsfiddle.net/D5cZj/

источник

2013-08-11 Joseph Humfrey

Какая версия iOS вы используете? – Swordfish0321

6.x на моем физическом iPhone и различных (в частности, 5.x обычно) на iPhone Simulator. –

С прошивкой 5 position: fixed поддерживается: http://caniuse.com/#search=fixed

Если вы хотите получить дополнительную помощь, вы должны показать нам, что вы уже пробовали.

Edit:

Проблема заключается в том, что сначала вы перемещаете всю страницу, пока браузер Navbar больше не видна, а затем вы начинаете перемещать содержание в пункте.

Чтобы предотвратить эту проблему, вы можете попробовать window.scrollTo(0, 1); How to completely hide the navigation bar in iPhone/HTML5

Но проблема появится снова, когда пользователь прокручивает к вершине (так Navbar является visble), а затем обратно вниз ..

Редактировать 2:

Если вы измените CSS на:

body { 
    height: 100%; 
    overflow: scroll; 
} 

.fixedThing { 
    position: fixed; 
    width: 100%; 
    height: 150%; 
    background: red; 
    opacity: 0.5; 
} 

.navbar { 
    width: 100%; 
}

это улучшит проблему.

источник

2013-08-11 13:44:53

Хорошо, добавлен пример в исходное сообщение! –

Я отредактировал свой ответ –

Спасибо, я планировал реализовать скрытую ссылку URL-bar в любом случае, спасибо за ссылку! Я придумал то же самое решение, просто увеличивая высоту ... немного уродливо, но в основном работает. Я до сих пор не понимаю, как navbar работает, но ...?! –

Как Bootstrap удается использовать фиксированное позиционирование для navbar на iOS?

ответ

Смежные вопросы