滚动后位于屏幕顶部的位置 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 出现在页面的顶部（因此，如果您向下滚动得足够远，您甚至看不到它）。它应该做的是出现在当前视图的顶部。

position: fixed;

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

不胜感激。

解决方案：

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

（查看最佳答案）

Answer 1

此 css 代码将使 div 粘在屏幕顶部

位置：固定；顶部：0px；右：0px；左：0px；

Answer 2

这可能值得研究。 jquery how to get the page's current screen top position?

然后在你的 CSS 中，我会像这样将位置设置为绝对：

position: absolute;

我假设您的按钮（显示 rightDiv）已经有一个点击处理程序。所以在这里你可以添加：

$('#rightDiv').prop('top',$('#html').offset().top*-1);

（时间 -1 非常重要，因为偏移量将为负）。上面提到的代码可能不会马上生效，我不是 CSS 高手，但我以前就是这样解决类似问题的。

Answer 3

enter code here

<table>
 <tr>
  <td style="width:100px; height:500px; background:#00aa00">
    foo
  </td>
  <td style="float:right">
    bar
  </td>
</tr>
   </table>

无论向下滚动多远，它都应该保留在我们的屏幕上

或者如果您希望右侧出现在您当前滚动到的任何位置，请检查并使用它来设置边距顶部：Determine distance from the top of a div to top of window with javascript

滚动后位于屏幕顶部的位置 div

Position div at the top of screen after scrolling

html

css

angular-ui-bootstrap

angular

此 css 代码将使 div 粘在屏幕顶部