如何使div元素固定到其他div

Question

我正在为自己创建一个网站，我希望我的上边界与浏览器窗口一起出现，直到它满足下边界。

下面是代码

​

.upperBorder {
  width: 100%;
  height: 40%;
  background-color: #EEECF5;
  -ms-transform: skewY(-5deg);
  /* IE 9 */
  -webkit-transform: skewY(-5deg);
  /* Safari 3-8 */
  transform: skewY(-5deg);
  box-shadow: 0 0 5px #333;
}

.lowerBorder {
  margin-top: 500px;
  width: 100%;
  height: 40%;
  background-color: #EEECF5;
  -ms-transform: skewY(-5deg);
  /* IE 9 */
  -webkit-transform: skewY(-5deg);
  /* Safari 3-8 */
  transform: skewY(-5deg);
  box-shadow: 0 0 5px #333;
}

div {
  display: block;
}

<div style="display:inline;" id="menu">
  <div class="img-container" data-slideshow style="position: fixed;">
    <img alt="img1" src="../Resources/Other/Pictures/1.jpg">
    <img alt="img2" src="../Resources/Other/Pictures/2.jpg">
    <img alt="img3" src="../Resources/Other/Pictures/3.jpg">
    <img alt="img4" src="../Resources/Other/Pictures/4.jpg">
    <img alt="img5" src="../Resources/Other/Pictures/5.jpg">
    <img alt="img6" src="../Resources/Other/Pictures/6.jpg">
    <img alt="img7" src="../Resources/Other/Pictures/7.jpg">
    <img alt="img8" src="../Resources/Other/Pictures/8.jpg">
    <img alt="img9" src="../Resources/Other/Pictures/9.jpg">
  </div>
  <div style="position: relative;height: 100vh;top:-150px;">
    <div class="upperBorder"></div>
    <div class="lowerBorder"></div>
  </div>
  <div class="logo"></div>
  <p class="Menu" style="left:50px;position: absolute;cursor: pointer;color: #EEECF5" onclick="">Home</p>
  <p class="Menu" style="left:15%;position: absolute;cursor: pointer;" onclick="">About Me</p>
  <p class="Menu" style="left:29%;position: absolute;cursor: pointer;" onclick="Projects()">Projects</p>

​

Answer 1

您可以通过比较偏移量来查看一个元素是否传递给另一个元素。请参见下面的示例。

​

$(window).on('scroll', function(){
  var $fixedDiv = $('#FixedDiv');
  var $CollissionDiv = $('#ColissionDiv');
  
  //Get offset values (taking into account the height of the fixed div)
  var fixedDivCollisionPoint = $fixedDiv.offset().top + $fixedDiv.height();
  var ColossionDivOffset = $('#ColissionDiv').offset().top;
  
  //When collsion is detected set it div positioning to static
  if(fixedDivCollisionPoint > ColossionDivOffset) {
    $fixedDiv.css('position', 'static');
  }
});

#FixedDiv {
  position: fixed;
  top: 100px;
  border: 1px solid black;
}

#ColissionDiv {
  border: 1px solid red;
}

.NoColissionDiv {
  border: 1px solid green;
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=NoColissionDiv>No Collision Div</div>
<div id=FixedDiv>Fixed Div</div>
<div id=ColissionDiv>Collision Div</div>
<div class=NoColissionDiv>No Collision Div</div>

​