固定头位置引导3模式

I want to use a fixed header in my Bootstrap modal, however if I set .modal-header as position:fixed it scrolls along with the moda content. How do I create a trully fixed header in BS modal?

我想在引导模式中使用一个固定的标题，但是如果我将。modal-header设置为位置:固定它与moda内容一起滚动。如何在BS模式下创建一个固定的标头?

6 个解决方案

#1

Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible.

不需要修改标题，只需修改主体的高度并使其可滚动即可。这样，页眉(和页脚)总是可见的。

You can easily do this using the CSS3 vh unit together with calc. Both vh as calc have pretty good browser support (IE9+).

使用CSS3 vh单元和calc可以很容易地做到这一点。

The vh unit is relative to the viewport (= browser window) height. 1 vh is 1% of the height and 100vh means 100% of the viewport height.

vh单元相对于viewport (= browser window)高度。1 vh是高度的1% 100vh是视场高度的100%

We just need to substract the height of the modal's header, footer and margins. It's going to be difficult it that dynamic. If those sizes are fixed, we just add all the heights.

我们只需要减去模态的页眉、页脚和页边距的高度。这是很难的。如果这些尺寸是固定的，我们只要把所有的高度相加。

Set either the height or max-height to calc(100vh - header+footer px).

将高度或最大高度设置为calc(100vh - header+footer px)。

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

See the jsfiddle

#2

Here's a simple trick. Let me assume that i have to fix the div with class "fixedHeader"

这是一个简单的技巧。假设我需要用类fixedHeader来修正div

Simple Jquery Way:

简单的Jquery方法:

$('.modal').scroll(function() {
     var a=$('.modal').scrollTop();
     $('.fixedHeader').css('top',a+'px');
});

CSS

CSS

.fixedHeader {
    position:fixed;
}

Whatever i have answered above is for normal bootstrap using jquery.But if someone is using angular bootstrap for the modal then

我上面回答的是使用jquery的普通引导。但是如果有人用角度引导的方式。

Angular

角

$timeout(function() {
    angular.element('.modal').scroll(function() {
        var a = angular.element('.modal').scrollTop();
        angular.element('.fixedHeader').css('top', a + 'px');
    });
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */

CSS

CSS

.fixedHeader {
    position:fixed;
}

Make sure you have jquery dependency installed in both cases.

确保在这两种情况下都安装了jquery依赖项。

#3

My solution may seem a little silly, but it details the steps I took to solve this problem for my use case.

我的解决方案看起来有点傻，但它详细说明了我为用例解决这个问题所采取的步骤。

I tried something like ritz078's answer, but what I found was that it did not work well on iOS when scrolling, since Safari likes to do things its own way.

我尝试了一些类似ritz078的答案，但我发现它在iOS上无法正常滚动，因为Safari喜欢按自己的方式运行。

So, my solution was to duplicate the bit of code I wanted to affix and place that duplicate code outside of the modal altogether in its own hidden wrapper:

因此，我的解决方案是复制我想要添加的代码，并将这些重复的代码放在模态之外的隐藏包装中:

<div class="fixed-header">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
    </div>
</div>

Then I used JS to 1) make the duplicate code visible after I scroll through the modal a bit, 2) close the duplicate code whenever I click out of the modal, and 3) restore functionality to the duplicate modal's close button:

然后我使用JS 1)让重复代码在模式中滚动一点后可见，2)每当我点击模式外时关闭重复代码，3)将功能恢复到重复模式的关闭按钮:

$('#myModal').on('scroll', function() {
    var threshold = 60;

    if ($('#myModal').scrollTop() > threshold) {
        $('.fixed-header').addClass('affixed');
    }
    else {
        $('.fixed-header').removeClass('affixed');
    }
});

$('#myModal').on('hide.bs.modal', function (e) {
    $('.fixed-header').removeClass('affixed');
});

$('.fixed-header button').click(function() {
    $('#myModal').modal('hide');
});

The challenge here is matching the modal's styling (particularly its width and margins), but this solution lets you scroll the modal freely on iOS without looking funky, which was my goal.

这里的挑战是匹配模态的样式(特别是它的宽度和边距)，但是这个解决方案允许你在iOS上*地滚动模态，而不让它看起来很时髦，这是我的目标。

JSFiddle (forked from Jasny's answer to show how it's different in scope from his answer)

JSFiddle(从Jasny的答案中分离出来，表示它与他的答案在范围上有什么不同)

#4

As per my comment, this was actually an improvement in Bootstrap 3. Allowing long content and having the whole modal scroll, not just the 'content' of the modal.

根据我的评论，这实际上是Bootstrap 3的改进。允许长内容和拥有整个模式滚动，而不仅仅是模式的“内容”。

You can override it with something like this, but it's not as nice functionality.

你可以用这样的东西覆盖它，但它的功能不太好。

.modal {
  overflow: hidden;
}

.modal-body {
  height: 300px;
  overflow: auto;
}

Demo

演示

#5

In javascript add a class to modal:

在javascript中，向modal添加一个类:

windowClass: 'framework-modal'

In css adjust o modal-body:

在css中调整o模体:

.framework-modal .modal-body {
    max-height: 600px;
    overflow: auto;
}

#6

In Body content

在正文内容

CSS:

CSS:

body{
    overflow:hidden;
}