Twitter Bootstrap 模态打开/关闭导致固定标题跳转 [英] Twitter Bootstrap modal opening/closing causes fixed header to jump
本文介绍了Twitter Bootstrap 模态打开/关闭导致固定标题跳转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的注册域名的简单 2 页网站几乎完成了.不幸的是，我有一个似乎无法解决的小问题:当 Twitter Bootstrap 模式打开和关闭时，标题会跳动.在移动设备上没有问题.该问题仅出现在台式机和笔记本电脑等较大的视口中.
如何重新创建
- 在网络浏览器中打开
我想要什么
我希望标题在打开/关闭模式时停止跳跃.滚动条消失的事实不是问题.实际上，我希望它保持这种状态.
更新
我注意到跳转标题只发生在固定位置的元素中，例如我的标题(添加了 Bootstrap 类 navbar-fixed-top).它甚至出现在 Bootstrap 网站本身:http://getbootstrap.com/javascripts.转到桌面上的模式 > 可选尺寸"区域，然后单击其中一个按钮.您会看到右侧菜单来回跳动.
当模式打开时，类 .modal-open 被添加到 body 元素中(感谢 @Pred 指出这一点).它在右侧添加了 15px 的填充，与滚动条间距相同.这可以防止身体来回跳跃.
不幸的是，这种填充显然不适用于固定元素.
解决方案我似乎找到了解决问题的快速方法.它使用一段 javascript 为标题添加额外的样式(15px padding-right)以防止它跳跃.这可能不是最好的解决方案，但现在它工作得很好.
由于在小于 768 像素(移动)的视口上没有问题，这段代码仅将额外的 15 像素添加到更大的视口，例如台式机和笔记本电脑
相关文章
- Twitter Bootstrap模态打开/关闭导致固定标头跳转;
- Twitter 喜欢固定标题;
- 禁止关闭Twitter Bootstrap模态窗口;
- 造型Twitter Bootstrap模态关闭图标;
- CSS固定标题;
- 如何关闭Twitter Bootstrap模态(首次启动后);
- Twitter像固定标头;
- Bootstrap模态：关闭当前，打开新的;
- Twitter Bootstrap / jQuery - 如何暂时阻止模态被关闭？;
- Twitter bootstrap：模态淡化;
- 固定标题到 UITableview?;
- 滚动时固定标题;
- 固定标题在Jqtouch;
- 关闭 Bootstrap 模态;
- 如何处理 Twitter Bootstrap 中的模态关闭事件?;
- 使用固定标题使固定页脚工作;
- 使固定标题滚动水平;
- UWP MapControl:MapElement固定标题;
- 在滚动时固定标题;
- 使用固定标题滚动UL;
- 具有固定标题的iFrame;
- 带固定标题的Gridview;
- HTML固定标题居中问题;
- Twitter Bootstrap 模态表单提交;
- Twitter Bootstrap模态宽度问题;
前端开发最新文章
- 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
- 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
- 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
- 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
- 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
- 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
- 此请求已被阻止;内容必须通过HTTPS提供;
- 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
- 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
- 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
