How can i detect if a particular element or div is scrolled in jQuery?

3284 views javascript
-1

I am trying to determine when the particular content (in the middle) is scrolled. Here is a demo.

case 1: When the image in the middle is scrolled, the aqua column content should have a fixed position.

case 2: When the middle (sand) column is scrolled the aqua column content should have an initial position

So the main problem is how to detect when the particular elements are scrolled.

.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>

answered question

1 Answer

11

<div id="mydiv">My div</div>

$('#mydiv').scroll(function(e) {
   // implement code here
});

posted this

Have an answer?

JD

Please login first before posting an answer.