Question

我在下面举例如下。当您单击黄色框时，将显示一个叠加层，它可以正常工作。但是当我向下滚动它时，因为它有一个固定的位置。

当我滚动时，如何确保叠加层保持在.div的顶部，又称为“不移动”？

$('.modal').css("top", $(".div").offset().top).css("left", $(".div").offset().left).css("width", $(".div").css("width")).css("height", $(".div").css("height"));

$(".div").click(function() {
  $('.modal').addClass("loading");
})

.div {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 300px;
  background-color: yellow;
  content: "";
}

body {
  height: 500px;
  background-color:black;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

.modal.loading {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="modal"></div>

Answer 1

将位置更改为绝对。

.modal {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

Answer 2

使用绝对位置更改模态的固定位置，将.modal放在.div中

＆＃13;

$(".div").click(function() {
  $('.modal').addClass("loading");
})

＆＃13;

.div {
  margin: 100px auto 0;
  height: 300px;
  width: 300px;
  background-color: yellow;
  position: relative;
}

body {
  height: 500px;
  background-color: black;
}

.modal {
  display: none;
  position: absolute;
  top:0;
  left:0;
  z-index: 2;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

.modal.loading {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
.div content
  <div class="modal"></div>
</div>

＆＃13;

Answer 3

我想你想要这样的事情，告诉我是不是做错了什么。

首先，您需要在模态类中使用position: fixed;更改position: absolute;。然后将模态类div放入类div中，就像这样

<div class="div">
  <div class="modal"></div>
</div>

检查代码段是否正常运行

$(".div").click(function() {
  $('.modal').addClass("loading");
})

.div {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 300px;
  background-color: yellow;
  position: relative;
}

body {
  height: 500px;
  background-color: black;
}

.modal {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

.modal.loading {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="modal"></div>
</div>

叠加固定在div顶部并保持位置页面滚动

3 个答案: