How to make an element fixed after scrolling to a certain place on the page?

Question

JavaScript

Hello. There is a site on Bootstrap. The page has a map-container block with a map, there is other content above and below this map-container block. Block height 2000px, map height 400px. It is necessary that when the user scrolls the page and reaches a block with a map, that very map becomes fixed and scrolls to the end of this block. Having reached the end of this block, the card remained at the bottom. In this case, the user scrolls further down the content, and the map remains at the bottom of that map-container block. Please help make this idea a reality.

<div class="some-content" style="height: 1000px">some content</div>
<div class="container">
   <div class="row">
      <div class="col-md-8"></div>
      <div class="col-md-4">
               <div class="map-container" style="height: 2000px">
                         <div class="map" style="height: 400px">map</div>
               </div>
      </div>
   </div>
</div>
<div class="some-content" style="height: 1000px">some content</div>

Answer 1

sticky-js

Answer 2

https://webref.ru/course/position/sticky

Answer 3

toggle position relative/fixed, track window's scroll event