Question

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

我希望更新价值“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

非常感谢！

Answer 1

使用position: fixed代替absolute

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

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

Answer 2

我不确定我理解你的问题。滚动时你想让你站在原地，对吧？我不知道你为什么要这样做，但你可以使用Javascript来增加你的顶级属性。

使用JQuery的一个例子。

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

滚动时增加顶部位置绝对值

2 个答案: