Здравствуйте. Есть сайт на Bootstrap. На странице есть блок map-container с картой map, сверху и снизу от этого блока map-container есть другой контент. Высота блока 2000px, высота карты 400px. Необходимо, чтобы когда пользователь прокручивая страницу и доходил до блока с картой, та самая карта становилась фиксированной и прокручивалась до конца этого блока. Дойдя до конца этого блока, карта оставалась снизу. При этом пользователь дальше прокручивает контент вниз, а карта остается в низу того блока map-container. Помогите реализовать данную задумку.
<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>
