Question

这是我最初的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的附加插件：

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

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

如何显示div #map，屏幕顶部/右侧的固定位置与我的初始尺寸（当它位于相对位置时）？

有人能解决这个问题吗？谢谢你的帮助！

这是我想要的场景：

Answer 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()));
});

如何在Bootstrap中将div位置从relative设置为fixed

1 个答案: