Wie man ein klebriges Element am Ende des Elternelementes stoppt

Ich habe ein Layout mit einer Inhaltsspalte und einer klebrigen Seitenleiste. Wenn ich die Seite herunterscrolle, muss ich die Seitenleiste am Ende der Inhaltsspalte anhalten.Wie man ein klebriges Element am Ende des Elternelementes stoppt

Hier ist der HTML und CSS Ich verwende:

<div class="container"> 
    <div class="content">Content</div> 
    <div class="sidebar">Sidebar (sticky)</div> 
    <div style="clear:both"></div> 
</div> 


.content{ 
    float: right; 
    width: 80%; 
    margin-left: 20%; 
} 

.sidebar { 
    float: left; 
    width: 20%; 
    position: -webkit-sticky; 
    position: sticky; 
    bottom: 30px; 
}

Auch auf https://codepen.io/anon/pen/awNorj

Wo bin ich falsch?

Quelle

2017-06-10 Fred K

Sie nicht alles auf einer Webseite, ohne sie in das DOM eingefügt, damit ich Ihre Frage nicht verstehen, setzen können, aber Sie werden benötigt, um Ihre Markup hier zu veröffentlichen, nicht Codepen, wo es morgen ändern oder verschwinden kann und niemand in der Zukunft hilft: https://stackoverflow.com/help/mcve – Rob

Können Sie erklären, was Sie mit DOM meinen? Vielleicht hilft ein Screenshot. Ich sehe nicht, dass der von dir erwähnte "unter die Endlinie der rechten Spalte geht". –

Jungs, das ist das Verhalten, das er will http://i.imgur.com/NTVo5ro.png, aber stattdessen bekommt er http://i.imgur.com/M80qLWU.png –

mit Ihrem Element Versuchen:

position: absolute;

Quelle

2017-06-10 13:50:53 RaphaMex

Ich kann nicht verwenden Position: absolute, weil es die Position überschreiben wird: sticky –

Wie man ein klebriges Element am Ende des Elternelementes stoppt

Antwort

Verwandte Themen