位置:固定在具体化 CSS 模式不起作用

Question

我希望在模态滚动时修复模态的标头，但位置：固定;不起作用。我正在使用Materialize CSS进行模态构造。但是位置：粘性正在起作用。

$(document).ready(()=>{
   $('#missionModal').modal();
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
    <div class="">
        <div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">
        </div>
        <div style="margin-top:100px;height:550px">
            <p>This ois naven don</p>
        </div>
    </div>
    <div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
    <i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>

Answer 1

也许试试这个。我重建了你的HTML和CSS代码：

只需确定哪个是您的标题，并在您的模态主体上给出一个固定的高度即可滚动。而且，具体化 css 有一个默认overflow-y: auto我只是给它初始的，这样整个模态就不可滚动了。

请看一下我的代码：

$(document).ready(()=>{
   $('#missionModal').modal();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.modal {
  overflow: initial !important;
}
.modal-header {
  height: 100px;
  background: #0a2701;
  font-size: 40px;
  padding: 20px;
  color: #ffffff;
}
.modal-body {
  overflow-y: auto;
  height: 120px;
background: #fff;
}
.modal-body div {
  height:550px
}
.modal-close {
  float: right;
  display: inline-block;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
  <div class="modal-header">This is a header.</div>
        <div class="modal-body">
          <div>
            <p>This ois naven don</p>
          </div>
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
    <i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>