如何在 Bootstrap 中将 div 位置从相对设置为固定答案

【问题标题】：How to set div position from relative to fixed in Bootstrap如何在 Bootstrap 中将 div 位置从相对设置为固定
【发布时间】：2016-09-13 03:32:10
【问题描述】：

这是我最初的 HTML 结构（我使用了 Bootstrap 框架）

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

还有CSS：

#list
{
    height : 2500px /* For the exemple */
}

#map
{
    height : 500px
}

#map.affix {
    position: fixed;
    top: 70px;
    right: 0;
}

最初我对 div #map 的位置是relative。

当 div (#map) 在屏幕上可见时，我想将 div #map 的位置设置为 fixed，直到 div #list 的底部。

最后，当我的 div #map 到达 div #list 的底部时，我想再次将我的 div 设置为 relative 位置。

对于这个场景，我使用了bootstrap的affix插件：

$('#map').affix({
        offset: { top:  $('#map').offset().top }
    });

但是当我的滚动到达 div #map 时，它会从屏幕上消失（因为位置是固定的，并且我的 div#map 的宽度是流动的）

如何在屏幕顶部/右侧显示固定位置的 div #map 以及我的初始大小（当它位于位置时：相对）？

有人可以解决这个问题吗？感谢您的帮助！

这是我想要的场景：

【问题讨论】：

标签： css twitter-bootstrap-3 fixed sticky

【解决方案1】：

您是否正在尝试做这样的事情？

http://jsfiddle.net/b43hj/3503/

<header>My Header</header>
<div class="container-fluid">
   <div class="row">   
      <div id="list"></div>
      <div id="theFixed">SOMETHING</div>
   </div>
</div>
<footer>My Footer</footer>

#theFixed {
height : 300px;
background: red;
position: fixed;
top: 700px;
right: 0px;
width: 40%;  
}
#list {
  height: 2500px;
  width: 200px;
  background: green;
}

$(window).scroll(function(){
    $("#theFixed").css("top",Math.max(0,700-$(this).scrollTop()));
});

【讨论】：