Question

我想在模态滚动时固定模态的标题，但是position：fixed;不管用。我正在使用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>

位置：已固定在Materialize CSS模式中不起作用

1 个答案: