滚动时增加绝对顶部位置答案

【问题标题】：Increment top position absolute on scroll滚动时增加绝对顶部位置
【发布时间】：2017-04-03 19:53:12
【问题描述】：

我有两个元素，一个位于左侧，一个位于绝对右侧。我想要正确的元素，当它消失时（（退出窗口），它保持固定（不使用位置：固定）。

我想更新“top”的值，但我做不到，而且我在互联网上找不到任何东西。

div.container{
  position: relative;
}

article{
  width: 50%;
  margin-top: 50px;
}

aside{
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  height: 400px;
  width: 300px;
  background: blue;
}

<div class="container">
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dolor elementum, mollis ipsum eget, fermentum odio. Nunc pretium, dui ut posuere tristique, lacus lacus vestibulum dui, eu finibus dui mi quis felis. Sed nibh odio, ultrices vel dui eget, eleifend efficitur leo. Suspendisse dui metus, maximus quis lacus in, condimentum viverra mauris. Nunc finibus dui felis, sed egestas purus posuere et. Aliquam erat volutpat. Quisque luctus, erat vitae fermentum sodales, nisi diam congue augue, nec ultrices magna eros non mi. Nam semper sollicitudin quam, sit amet porta purus tristique vitae. Suspendisse suscipit, ipsum vel mattis pretium, urna erat imperdiet metus, at dictum est metus quis nisl. Duis rhoncus leo sed erat pulvinar, sit amet auctor est placerat. Duis tincidunt velit dolor, quis luctus felis venenatis quis. Sed odio urna, malesuada in mauris sit amet, lobortis hendrerit turpis. In fringilla metus diam, ut malesuada augue elementum ut. Donec id pharetra elit. Maecenas maximus vitae magna nec gravida. Morbi ac pellentesque mi.

Sed tristique fermentum metus in finibus. Sed commodo ultricies justo eu gravida. Nulla facilisi. Vestibulum mattis tortor sem, quis egestas augue tempus at. Curabitur molestie ut dui ac pretium. Donec vehicula enim ut quam ullamcorper sollicitudin. Donec pretium tristique sapien, id maximus nulla fermentum nec. Sed aliquet consectetur nisi, ut finibus erat vestibulum sit amet. Ut suscipit condimentum nisi.

Aenean eleifend tempus aliquam. Maecenas a fringilla arcu. Nunc leo mi, venenatis sit amet libero luctus, vulputate luctus erat. Fusce ex felis, auctor consequat imperdiet quis, finibus vel est. Morbi vitae pretium felis, id vulputate justo. Phasellus nunc enim, vestibulum ac velit in, finibus tincidunt diam. Cras posuere in metus quis volutpat. Cras posuere metus vitae turpis placerat laoreet. Quisque dignissim quam ut nisl euismod viverra. Aenean sed augue sed lectus congue accumsan. Quisque vel pellentesque enim, ut tincidunt tortor. Vestibulum vel ex nec velit facilisis posuere eget a elit. Phasellus non vulputate turpis, vel venenatis odio.
</p>
  </article>
  
  <aside>
    My Aside
  </aside>
</div>

FIDDLE

非常感谢！

【问题讨论】：

你想把top更新成什么？
您的文章顶部已经设置在您的旁边。它们是直接内联的。
你能详细说明一下吗？我认为没有人真正了解您要做什么。

标签： javascript jquery css scroll

【解决方案1】：

使用position: fixed 而不是absolute

aside{
  position: fixed;
  right: 0;
  top: 0;
  color: white;
  height: 400px;
  width: 300px;
  background: blue;
}

https://jsfiddle.net/puxf496d/1/

【讨论】：

没错，我不能使用固定位置。
@Jeremy 无法使用固定定位的原因是什么？

【解决方案2】：

我不确定我是否理解您的问题。滚动时，您希望您的侧边保持原位，对吗？我不知道你为什么要这样做，但你可以使用 Javascript 来增加你的 side 的 top 属性。

使用 JQuery 的示例。

$(window).scroll(function(){        
    var top = $(document).scrollTop();
    $('.container aside').css('top',top);
});

【讨论】：