Keep div und seine Kinder beim Scrollen behoben

Wenn Benutzer scrollt, wie man oberen div festgelegt, so dass untere div wird über ihn gehen? Ich weiß nicht, wie groß das Bild sein wird. http://codepen.io/anon/pen/oxOPXv Keep div und seine Kinder beim Scrollen behoben

// Stays in position 
<div class="col-md-12 top-wrapper"> 
    <div class="container image-wrapper"> 
    <img src="http://placehold.it/750x550" /> 
    </div> 
</div> 

// moving up and over .top-wrapper (also other content below this) 
<div class="bottom-wrapper"> 
    <div class="container"> 
    <div class="col-md-3 sidebar"> 
     <p>Lorem</p> 
    </div> 
    <div class="col-md-9 main-div"> 
     <p>Lorem</p> 
    </div> 
    </div> 

</div>

Quelle

2016-05-14 Ivan Topić

Nicht sicher über alle Bootstrap-Möglichkeiten, aber, da Sie jQuery haben, und Bildhöhe ist dynamisch ... könnte dies (vielleicht) helfen: http://codepen.io/anon/pen/oxOPBg – sinisake

Sie buchstabiert "Position" falsch in Ihrem CSS. Du hast das letzte "i" verlassen. Es sollte sein:

.top-wrapper { 
    background-color: #eee; 
position: fixed; 
}

Quelle

2016-05-14 23:20:40 haltersweb

Wahr, das war, als ich versuchte, Code auf Codepen einzurichten. Aber die Frage bleibt immer noch, weil das alles kaputt macht, Header und niedrigerer Inhalt :) –

Wenn ich das richtig bin zu verstehen, die .top-wrapper festgelegt ist und Sie wollen alles, was sonst in der Lage sein, um nach oben und über .top-wrapper. Da es nicht genügend Inhalte gibt, die deine Divs höher werden lassen, hast du nicht genug Platz, um wirklich hoch zu scrollen. Sie können, indem Sie diese Ihre vertikalen Raum erhöhen:

body { 
    height: 250vh; 
    overflow-y: auto; 
}

CODEPEN

Quelle

2016-05-15 00:34:23 zer00ne

Meinen Sie wie folgt ?: http://codepen.io/anon/pen/dMLqdM

I (dh position: fixed;) nicht nur die '.top-Wrapper' fixiert, aber auch der 'header', und zusätzlich gab der '.top-wrapper' eine margin-top: 50px;, um es unter dem Header zu positionieren. (Ich habe auch etwas mehr Inhalt zum unteren Wrapper hinzugefügt, um das Scrollen offensichtlicher zu machen)

Quelle

2016-05-15 00:57:11 Johannes

Keep div und seine Kinder beim Scrollen behoben

Antwort

Verwandte Themen