2016-10-26 2 views
0

Schätzen Sie, wenn Sie mir helfen können. Ich habe mehrere Bootstrap-Zeilen, und eine davon enthält 2 Spalten - links für den scrollbaren Text und rechts für die durch Affix fixierte Beschreibung. Die rechte Spalte muss angezeigt werden, wenn ich zur oberen linken Spalte blättern und ausblenden, wenn die linke Spalte vorbei ist. Ich habe versucht, es so zu machen, aber es hat nicht funktioniert. Jetzt fixiere den Affix am Körper (und nicht an den oberen und unteren Rand des Elternblocks, wie ich es wollte). Was mache ich falsch? (Außer mir sprechen Englisch :))Befestigung Bootstrap Affix zu nahe stehende Spalte

index.html:

... 
<body data-spy="scroll"> 
... 
    <div class="chapter"> 
     <div class="row" data-target="#myScrollSpy"> 
      <div class="col-md-5" > 
       my precious scrollable text 
      </div> 
      <div class="col-md-6" id="myScrollSpy"> 
       <div id="myAffix"> 
        my not so good working affix 
       </div> 
      </div> 
     </div> 
    </div> 
... 
    <script> 
    $('#myAffix').affix({ 
       offset: { 
       top: 100, 
       bottom: 100 
       } 
      }); 
    </script> 
... 
</body> 

style.css:

body { 
    position: relative; 
} 

.affix { 
    top: 150px; 
    width: 80%; 
} 

@media (min-width: 1200px) { 
    .affix { 
    }   
} 

.affix-bottom { 
    position: absolute; 
} 

@media (min-width: 1200px) { 
    .affix-bottom { 
    } 
} 

Antwort

Verwandte Themen