Is it possible to make text sticky in bootstrap? - html

Question

On my website file I'm trying to display a series of images on the left side of the sight, and have text information on the images stick to the top of the page on the right side. I've tried sticky-top, dataspy="affix", and multiple other things but no dice.
Here is an example of what I mean:
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

You can use 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>