Question

我正在使用角度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的位置设置为relative和absolute，但是如果一个是另一个的父级（在我的情况下这是不可能的），这似乎只能起作用。

帮助将大大适用。

解决方案：

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

（见最佳答案）

Answer 1

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

位置是：固定;顶部：0像素;右：0像素;左：0像素;

Answer 2

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

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

position: absolute;

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

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

（时间-1非常重要，因为偏移量为负）。上面提到的代码可能不会马上工作，我不是CSS主人，但那是我以前用来解决这类问题的方法。

Answer 3

enter code here

＆＃13;

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

＆＃13;

无论你滚动多远，都应该让它保持在我们的屏幕上

或者如果您希望右侧出现在当前滚动到的任何位置，请选中此项并使用它来设置margin-top：Determine distance from the top of a div to top of window with javascript

滚动后将div置于屏幕顶部

3 个答案:

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