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

Question

我试图确定何时滚动特定内容（在中间）。 这是一个演示 。

情况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

var imgParent = document.getElementById( 'img' );
var imgChildHeight = imgParent.firstElementChild.offsetHeight;
var aquaColumn = document.querySelector( '.fixed-aqua' );

window.addEventListener( 'scroll', function () {
    var top = this.scrollY;
    if ( top >= imgChildHeight ) {
        aquaColumn.style.position = 'initial';
    } else {
        aquaColumn.style.position = 'fixed';
    }
} );

Answer 2

JsFiddle解决方案
W3Schools文档

  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");  
}