1. Zuhause
  2. Frage und Antwort
  3. Zeige vollen Inhalt wenn div ist behoben

Zeige vollen Inhalt wenn div ist behoben

2016-09-25 4 views
0

Hier habe ich zwei lange div s. Die erste div ist fest, und ich möchte alle Elemente div.content, wenn der Benutzer scrollt zeigen, (weil ich voll Elemente auf ersten div. Wie kann ich das tun?Zeige vollen Inhalt wenn div ist behoben

<div style="display: block; width: 100%;"> 

    <div style="float: left; position: relative; z-index: 0;"> 
     <div style="position: relative;"> 
      <div class="content" style="padding-top: 10px; top: 10px; position: fixed;"> 

       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       <div style="margin-top: 10px;">MENU</div> 
       Show element after user scrolls 
      </div> 
     </div> 
    </div> 

    <div style="float: left; margin-left: 11%; width: 67%;"> 

     Right DIV FUll LONG TEXT 

    </div> 

</div>

Quelle

2016-09-25 EdrinBasha

+1

Es löscht nicht, was Sie wollen. Sie haben die mich gerichtet Nu-Gruppe und lange Inhalte div wie das: https://jsfiddle.net/zaaafd3k/. Wenn Sie scrollen, ist die Menügruppe fest und das lange Inhalts-Div wird gescrollt. Was für ein Verhalten willst du? – hsrv

+0

@hsrv ich habe volle Elemente (Menü) und mein Div nicht alle Elemente zeigen, wenn ich scroll, ich möchte nur alle zeigen, wenn ich scrollt – EdrinBasha

+1

Keine klare Problemstellung oder Beispiel! –

Antwort

1

Genau dies überprüfen. Ich denke nur, in Ihnen festgelegten Inhaltsblock einige Höhe hinzufügen müssen dann Überlauf blättern geben.

<div style="display: block; width: 100%;"> 
 

 
    <div style="float: left; position: relative; z-index: 0;"> 
 
     <div style="position: relative;"> 
 
      <div class="content" style="padding-top: 10px; top: 10px; position: fixed;overflow-y: scroll;height: 186px;"> 
 

 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
       <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
      <div style="margin-top: 10px;">MENU</div> 
 
       Show element after user scrolls 
 

 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div style="float: left; margin-left: 11%; width: 67%;"> 
 

 
     Right DIV FUll LONG TEXT 
 

 
    </div>

Quelle

2016-09-25 11:50:16

+0

check this my jsfiddle link https://jsfiddle.net/mvj7dhft/ –

+0

Kann ich ohne Überlauf diese Funktion machen? – EdrinBasha

+0

Ein festes Positionselement wird relativ zum Ansichtsfenster oder zum Browserfenster selbst positioniert. Das Ansichtsfenster ändert sich nicht, wenn das Fenster gescrollt wird, so dass ein fest positioniertes Element genau dort bleibt, wo es ist, wenn die Seite gescrollt wird. Deshalb werden Inhalte geschnitten. Also haben wir feste Höhe und Bildlaufleiste gegeben. –

Verwandte Themen

 Verwandte Themen