How to set div position from relative to fixed in Bootstrap
<p>Here is my initial HTML structure (I used Bootstrap framework)</p>

<pre><code>&lt;html&gt;
&lt;body&gt;
    &lt;header&gt;My header&lt;/div&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
            &lt;div id="list" class="col-md-7"&gt;&lt;/div&gt;
            &lt;div id="map" class="col-md-5"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
     &lt;footer&gt;My Header&lt;/footer&gt;
&lt;/body&gt;
</code></pre>

<p>And the css :</p>

<pre><code>#list
{
    height : 2500px /* For the exemple */
}

#map
{
    height : 500px
}

#map.affix {
    position: fixed;
    top: 70px;
    right: 0;
}
</code></pre>

<p>Initially my position of div #map is <strong>relative</strong>.</p>

<p>I would like to set position of div #map to <strong>fixed</strong> when the div (#map) becomes visible on the screen until the bottom of div #list.</p>

<p>And finally, I would like to set my div to <strong>relative</strong> position again when my div #map reached the bottom of div #list.</p>

<p>For this scenario, I used the affix plugin of bootstrap :</p>

<pre><code>$('#map').affix({
        offset: { top:  $('#map').offset().top }
    });
</code></pre>

<p>BUT when my scroll reaches the div #map, it disappears from the screen (because position is fixed and the width of my div#map is liquid)</p>

<p>How to display the div #map with the fixed position on the top/right off the screen ans with my initially size (when it'is in position:relative) ?</p>

<p>Is someone a solution to this problem ? Thanks you for your help !</p>

<p>Here is my desired scenario :</p>

<p><a href="https://i.stack.imgur.com/aOI9x.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aOI9x.jpg" alt="enter image description here"></a></p>