javascript - 如何检测jQuery中是否滚动了特定元素或div？

Question

我试图确定何时滚动特定内容（在中间）。 Here is a demo。

情况1：滚动中间的图像时，浅绿色列的内容应位于fixed位置。

情况2：滚动中间（沙）列时，浅绿色列的内容应位于initial位置

因此，主要问题是如何检测特定元素何时滚动。

.fixed-aqua {
  position: fixed;
  top: 0px;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="w3-row">

  <div class="w3-col m3 s3">
    <div class="w3-white">
      Nulla eu tortor eu justo ultricies consequat. Suspendisse potenti. Curabitur sollicitudin metus lobortis magna faucibus feugiat. Nunc tempus a ante fermentum viverra. Nunc id nulla sed tortor pellentesque eleifend at id mi.
    </div>

  </div>

  <div class="w3-col m6 s6 w3-sand">
    <div id="img">
      <img width="100%" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
    </div>

    <b>When image is scrolled, set aqua content to fixed</b> consectetur adipiscing elit. Curabitur egestas quam vitae libero scelerisque, id elementum nisi porttitor. Curabitur porttitor nisl id purus tristique elementum. Nullam sed varius dolor. Fusce
    commodo feugiat felis eu egestas. Nunc suscipit metus non suscipit condimentum. Aenean ullamcorper libero sed nunc ullamcorper, quis aliquet odio bibendum. Donec facilisis fringilla neque, at pretium lacus porta vitae. Donec a rhoncus tellus.Nulla
    eu tortor eu justo ultricies consequat. Suspendisse potenti. Curabitur sollicitudin metus lobortis magna faucibus feugiat. Nunc tempus a ante fermentum viverra. Nunc id nulla sed tortor pellentesque eleifend at id mi. Vivamus fermentum tincidunt neque,
    eu rutrum elit sollicitudin vitae. Integer viverra a ex sit amet egestas. Donec viverra tempus leo et commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ante tortor, volutpat ac risus nec, pretium
    vehicula augue. In hac habitasse. Integer viverra a ex sit amet egestas. Donec viverra tempus leo et commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ante tortor, volutpat ac risus nec, pretium
    vehicula augue. <b>when the middle column is scrolled aqua column should not be fixed anymore.</b>
    <div class="w3-pink">
      Suspendisse potenti. Curabitur sollicitudin metus lobortis magna faucibus feugiat. Nunc tempus a ante fermentum viverra. Nunc id nulla sed tortor pellentesque eleifend at id mi. Vivamus fermentum tincidunt neque, eu rutrum elit sollicitudin vitae. Integer
      viverra a ex sit amet egestas. Donec viverra tempus leo et commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ante tortor, volutpat ac risus nec, pretium vehicula augue. In hac habitasse Suspendisse
      potenti. Curabitur sollicitudin metus lobortis magna faucibus feugiat. Nunc tempus a ante fermentum viverra. Nunc id nulla sed tortor pellentesque eleifend at id mi. Vivamus fermentum tincidunt neque, eu rutrum elit sollicitudin vitae. Integer viverra
      a ex sit amet egestas. Donec viverra tempus leo et commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ante tortor, volutpat ac risus nec, pretium vehicula augue. In hac habitasse
    </div>




  </div>

  <div class="w3-col m3 s3">
    <div class="w3-aqua">
      Nulla eu tortor eu justo ultricies consequat. Suspendisse potenti. Curabitur sollicitudin metus lobortis magna faucibus feugiat. Nunc tempus a ante fermentum viverra. Nunc id nulla sed tortor pellentesque eleifend at id mi.
    </div>

  </div>


</div>

Answer 1

JsFiddle Solution
W3Schools Documentation

  window.onscroll = function() {
  myFunction()
};

var stickyStart = document.querySelector("#img").offsetTop;
var stickyEnd = document.querySelector("#end").offsetTop;

function myFunction() {
  if (window.pageYOffset >= stickyStart && window.pageYOffset < stickyEnd)
    document.querySelector("#fixed-aqua").classList.add("sticky");
  else
    document.querySelector("#fixed-aqua").classList.remove("sticky");  
}