Как сделать элемент 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>