增加頂部位置絕對滾動

我有兩個元素，一個位於左側，一個位於絕對位置。我想正確的元素，當它會消失（（退出窗口），它仍然是固定的（不使用位置：固定）。做到這一點，我不能在互聯網上找到任何東西。增加頂部位置絕對滾動

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

非常感謝你！

來源

2017-04-03 Jeremy

你想更新頂部？ –

我在旁邊，謝謝 – Jeremy

您的文章頂部已經設置在您旁邊的頂部。他們直接內聯。 –

使用position: fixed代替absolute

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

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

來源

2017-04-03 20:02:56 indubitablee

準確地說不，我不能使用固定位置。 – Jeremy

@Jeremy背後的原因是不能使用固定定位？ – indubitablee

我不知道我理解你的問題。你希望你在一邊滾動時站在原地，對吧？我不知道你爲什麼想要這樣做，但是你可以使用Javascript來增加你的旁邊的頂級屬性。

一個使用JQuery的例子。

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

來源

2017-04-03 20:20:03 Tutch

增加頂部位置絕對滾動

回答

相關問題