Twitter Bootstrap模态打开/关闭导致固定标头跳转 [英] Twitter Bootstrap modal opening/closing causes fixed header to jump

问题描述

我的注册域名几乎只有一个两页的简单网站. 不幸的是，我有一个似乎无法解决的小问题:Twitter Bootstrap模式打开和关闭时出现的跳动标题. 在移动设备上没有问题.该问题仅在较大的视口(例如台式机和笔记本电脑)中发生.

I am almost done with a simple 2-page website for my registered domain names. Unfortunately I have one small issue I can't seem to fix: a jumpy header when a Twitter Bootstrap modal opens and closes. On mobile devices there's no problem. The problem only occurs in larger viewports like desktops and laptops.

1. 在网络浏览器中打开 http://www.domains.cloudlabz.nl/domains 并通过降低视口高度来确保获得垂直滚动条.
2. 单击蓝色的更多信息"按钮之一.
3. 模式打开后，请注意跳跃的标题和滚动条消失.
4. 关闭模式，并注意标题跳回并且滚动条重新出现.

1. Open http://www.domains.cloudlabz.nl/domains in a webbrowser and make sure you get a vertical scrollbar by lowering the viewport height.
2. Click on one of the blue 'more info' buttons.
3. Notice the jumping header and disappearing scrollbar once the modal opens.
4. Close the modal and notice the header jumping back and the scrollbar reappearing.

检查以下图像(Opera，Safari，Firefox和Chrome中的结果相同):

Check the following image (same result in Opera, Safari, Firefox and Chrome):

我希望标题在打开/关闭模态时停止跳动.滚动条消失的事实不是问题.实际上，我希望它保持这种状态.

I'd like the header to stop jumping when opening/closing a modal. The fact the scrollbar disappears is not an issue. Actually, I would like it to stay like that.

我注意到跳转标头只发生在固定位置的元素上，例如标头(添加了Bootstrap类navbar-fixed-top).它甚至发生在Bootstrap网站本身上: http://getbootstrap.com/javascripts .转到桌面上的模型>可选尺寸"区域，然后单击按钮之一.您会看到右侧菜单来回跳动.

I noticed the jumping header only occurs with fixed position elements such as my header (added Bootstrap class navbar-fixed-top). It even occurs on the Bootstrap website itself: http://getbootstrap.com/javascripts. Go to the 'Modals > Optional Sizes' area on a desktop and click one of the buttons. You'll see the right side menu jumping back and forth.

当模式打开时，类.modal-open被添加到body元素(感谢指出@Pred).它在右侧添加了15px的填充，与滚动条装订线的宽度相同.这样可以防止身体来回跳动.

When the modal opens, the class .modal-open is added to the body element (thanks for pointing that out @Pred). It adds a padding of 15px to the right, which is the same width as the scrollbar gutter. This prevents the body from jumping back and forth.

不幸的是，这种填充显然不适用于固定元素.

Unfortunately this padding apparently does not apply to fixed elements.

推荐答案

我似乎找到了解决我问题的快速方法.它使用一段JavaScript为标题添加了额外的样式(向右15px填充)，以防止其跳转. 这可能不是最好的解决方案，但现在它可以正常工作.

I seemed to have found a quick fix for my issue. It uses a piece of javascript to add extra style to the header (15px padding-right) to prevent it from jumping. This might not be the best solution but for now it works just fine.

由于在小于768像素(移动设备)的视口中没有问题，因此这段代码仅向台式机和笔记本电脑等较大的视口中添加了额外的15像素

Since there were no issues on viewports smaller than 768px (mobile) this piece of code only adds the extra 15px to larger viewports such as desktops and laptops

<script>

    $(document).ready(function(){

        // Dirty fix for jumping scrollbar when modal opens

        $('#requestModal').on('show.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","15px");
            }
        });

        $('#requestModal').on('hide.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","0px");
            }
        });

    });

</script>

如果您知道更好的解决方案(最好仅使用CSS3)，请告诉我. 感谢您的所有帮助！

If you know a better solution (preferably CSS3 only), please let me know. Thanks for all the help!

这篇关于Twitter Bootstrap模态打开/关闭导致固定标头跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！