Ist es möglich, Text im Bootstrap sticky zu machen?

Question

In meiner Website-Datei versuche ich, eine Reihe von Bildern auf der linken Seite des Visiers anzuzeigen, und Textinformationen auf den Bildern bleiben am oberen Rand der Seite auf der rechten Seite. Ich habe versucht sticky-top, dataspy = "Affix", und viele andere Dinge, aber keine Würfel. Hier

ist ein Beispiel dafür, was ich meine: http://imgur.com/T8Vo0JC

<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-md-6 col-sm-9"> 
     <img id="constructedimage" src="images/small1.jpg"> 
    </div> 

    <div class="col-md-6 col-sm-9"> 
     <p class="pstylefooter">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac </p> 
    </div> 

</div> 

    </div>  

    <div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-md-6 col-sm-9"> 
     <p class="pstyle">PROCESS WORK</p> 
     <img id="constructedimage" src="images/small1.jpg"> 
    </div> 
</div> 
    </div>  

Answer 1

können Sie verwenden position: sticky

* {margin:0;padding:0;} 
 

 
body { 
 
    line-height: 1; 
 
} 
 

 
.sticky { 
 
    position: sticky; 
 
    top: 0; 
 
    background: rgba(255,255,255,0.5); 
 
    margin-left: 50%; 
 
    padding-left: 1em; 
 
} 
 

 
div { 
 
    margin: 0 0 2em; 
 
} 
 

 
img { 
 
    max-width: 50%; 
 
}

<div> 
 
    <p class="sticky">text</p> 
 
    <img id="constructedimage" src="https://previews.123rf.com/images/farang/farang1201/farang120100040/11875191-Amazing-sunset-scene-Long-exposure-shot-vertical-panoramic-composition-Stock-Photo.jpg"> 
 
</div> 
 

 
<div> 
 
    <p class="sticky">more text</p> 
 
    <img id="constructedimage" src="https://previews.123rf.com/images/farang/farang1201/farang120100040/11875191-Amazing-sunset-scene-Long-exposure-shot-vertical-panoramic-composition-Stock-Photo.jpg"> 
 
</div>