Skip to main content
johns45317965
Known Participant
May 1, 2018
Answered

Have Image move along with Vertical scroll down...within specific section

  • May 1, 2018
  • 1 reply
  • 6270 views

I'm working with a Bootstrap Template that give me an Image along the right side of some description paragraphs on the left. However, as the reading goes on the the scrolling must go down the traffic will leaving the pictures I place on the upper-right and it will be all blank on the lower-right half. That's a bummer .

So it would be great if the Image I place on the right would be able to "follow" along the right hand side as the reader scrolls on down and does the reading. Right? But how would I do this. I imagine I would have to make some additions within the CSS which I already looked into online but found absolutely nothing. Also, because I don't want to mess up anything within any of the other "sections" of the template I'd like to be very cautious of what's added.

So has anyone else heard or seen of ways to have an image scroll or "drop" down when a site browser/visitor is scrolling down a site? Or is it just me? I could swear I've seen this before...

This topic has been closed for replies.
Correct answer Nancy OShea

Which version of Bootstrap are you using?   Bootstrap 4 uses flexbox but Bootstrap 3 uses floats. 

CSS fixed positioning might do what you envision.   Just keep in mind this might mess things up on mobile devices.   So test usability in all devices beforehand.  

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
May 2, 2018

Which version of Bootstrap are you using?   Bootstrap 4 uses flexbox but Bootstrap 3 uses floats. 

CSS fixed positioning might do what you envision.   Just keep in mind this might mess things up on mobile devices.   So test usability in all devices beforehand.  

Nancy O'Shea— Product User & Community Expert
johns45317965
Known Participant
May 3, 2018

I don't know the version I use, I attain all my themes from bootstrapmade.com. I just sent them a message asking what their version is so hopefully they'll reply.

I did search "CSS fixed positioning" (thanks for the proper term to search) and all of which I found had them following along an entire browser page. That's cool and all, but what I'm looking for in my specific situation is for an Image to be able to stay within a specific section of a pre-made bootstrap stylesheet file. For instance, having an image slide along down (and within) the right side of just the "About us" section box...and then be able to stop there as a site visitor continues to search down to the footer, etc.

I understand that's getting a little more stylist and complex for a template. But since some sections just allow one image - and if an author post more text - that just leaves a lot of dead, blank space

Jon Fritz
Community Expert
Community Expert
May 3, 2018

It sounds like what you should be looking for are "sticky elements".