html - 滚动后将 div 定位在屏幕顶部

Question

我正在使用 angular 2，但这个问题主要是关于 css(我正在使用 bootstrap 3)。我有 2 个 div(leftDiv 和 rightDiv)，如下所示:

<div class="row">

 <div *ngFor="let address of addresses">
  <div class="card" id="leftDiv">
   <h5 class="card-text">{{address.name}}</h5>
   <h5 class="card-text">{{address.street}}</h5>
   <h5 class="card-text">{{address.city}}</h5>
  </div>
 </div>

 <!-- bunch of code -->

 <div class="col-md-6" id="rightDiv">
  <!-- should appear at the top of current view -->
 </div>

</div>

因此，左侧 (leftDiv) 有一堆带有地址的卡片。 rightDiv 仅在单击按钮时出现，并且一次仅显示 1 个。目前发生的情况是，rightDiv 出现在页面的顶部(因此，如果您向下滚动得足够远，您甚至看不到它)。它应该做的是出现在当前 View 的顶部。

position: fixed;

那样做，但它会粘在屏幕顶部，这是我不想要的(我应该出现并留在那里)。 我还尝试将 leftDiv 和 rightDiv 的位置设置为相对和绝对，但这似乎只有在一个是另一个的父级时才有效(这在我的情况下是不可能的)。

帮助将不胜感激。

解决方法:

document.getElementById('rightDiv').style.top = 
document.body.scrollTop.toString()+'px';

(查看最佳答案)

Answer 1

这段CSS代码将使div粘在屏幕顶部

位置:固定；上:0px；右:0px；左:0px；