Я почти закончил с простым 2-страничным веб-сайтом для моих зарегистрированных доменных имен. К сожалению, у меня есть одна небольшая проблема, которую я, кажется, не могу исправить: скачкообразный заголовок, когда модал Twitter Bootstrap открывается и закрывается. На мобильных устройствах проблем нет. Эта проблема возникает только в больших видовых экранах, таких как настольные компьютеры и ноутбуки.
Как воссоздать
- Откройте http://www.domains.cloudlabz.nl/domains в веб-браузере и убедитесь, что вы получаете вертикальную полосу прокрутки, уменьшив высоту области просмотра.
- Нажмите одну из синих кнопок "Подробнее".
- Обратите внимание на прыгающий заголовок и исчезающую полосу прокрутки, как только открывается модальное окно.
- Закройте модальное окно и заметьте, что заголовок возвращается назад и снова появляется полоса прокрутки.
Проверьте следующее изображение (тот же результат в Opera, Safari, Firefox и Chrome):
Что бы я хотел
Я бы хотел, чтобы заголовок прекратил прыгать при открытии/закрытии модального окна. Тот факт, что полоса прокрутки исчезает, не является проблемой. На самом деле, я бы хотел, чтобы так и оставалось.
Обновление
Я заметил, что прыжковый заголовок происходит только с элементами фиксированной позиции, такими как мой заголовок (добавлен класс Bootstrap navbar-fixed-top). Это даже происходит на самом сайте Bootstrap: http://getbootstrap.com/javascripts. Перейдите в область "Modals> Optional Sizes" на рабочем столе и нажмите одну из кнопок. Вы увидите меню правой стороны, прыгающее вперед и назад.
Когда модальное окно открывается, к элементу body добавляется класс .modal-open (спасибо, что указали на @Pred). Он добавляет отступ в 15 пикселей вправо, равный ширине желоба полосы прокрутки. Это препятствует тому, чтобы тело подпрыгнуло назад и вперед.
К сожалению, это дополнение, очевидно, не относится к фиксированным элементам.