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

[johns45317965]

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...

[Nancy OShea · Accepted solution]

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.  

[johns45317965]

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]

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

[johns45317965]

I searched "sticky elements" and that's exactly what I'm trying to do

Here's a site I found that made it' rather simple in explaining how to do it: STICKY ELEMENTS... I like that way cause it's rather simple but the issue with this is it looks like the "element" (in my case an image) would continue to travel all the way to the bottom to the site page (correct?), which I DON"T want i.e. I want to to halt somewhere So...

1.) is there a way to stop the image at a particular spot (or set the # of pixels it can travel)?

2.) where would I place  that "sticky element" script? Because in my case my image is in like line 500-something of a .css script...and if I was to use a simple script like that I don't know if I should add that <style>...</style> somewhere in that .css or just into the main source code

3.) I would also need to embrace the image that supposed to be like this -> <img class="sticky" src="img_avatar.png" alt="Avatar">

When it's already like this (line 500-something of .css) ->

#about .about-container .background {

  min-height: 300px;

  background: url(../img/vinyl-replacement-window.png2.jpg) center top no-repeat;

  margin-bottom: 10px;

}

Tad confusing...

[Jon Fritz]

I'm sorry, I really don't use position:sticky in any of my sites, because Microsoft browsers don't see it, so I don't have a direct answer for you. Though I will say there are a lot of javascript variations of sticky elements that can do much more than the sticky css setting can. It may be worth looking into sticky javascript or jquery solutions.

[Nancy OShea]

If you look at the top of your CSS code, it should indicate which version of Bootstrap you have. 

This method uses version 3.7  with the data Scrollspy plugin in Bootstrap.  Adjust data-offset-top value as required.    A higher number means more scrolling must occur before the sidebar sticks.   A lower number means less scrolling.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Affix Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

/* Note: Try to remove the following lines to see the effect of CSS positioning */

.affix { top: 20px; }

</style>

</head>

<body>

<div class="container-fluid">

<div class="jumbotron">

<h1>Bootstrap Affix Example</h1>

<h3>Fixed (sticky) vertical sidebar on scroll</h3>

<p>Scroll this page to see how the left sidebar behaves with data-spy="affix".</p>

<p><strong>The left sidebar sticks to the page when you have scrolled a specified amount of pixels.</strong></p>

</div>

</div>

<div class="container">

<div class="row">

<div class="col-sm-3">

<div data-spy="affix" data-offset-top="325">

<img class="img-thumbnail" src="https://placeimg.com/200/360" alt="placeholder">

</div>

</div>

<div class="col-sm-9">

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

</div>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

[johns45317965]

The template I use actually has 4 different CSS's in it and I found one which reads "Version - 3.5.2". Another reads "Font Awesome 4.7.0"....but the style one I've been working with the most (for the image at hand) does not give a version. Oh well.

As for the method uses version 3.7 you gave me I played with that for awhile. Damn, that's tad complicated! I tried adding things to it and taking things back but the main problem at hand is I can't figure out how to get the image to "stop" at some point as the visitor scrolls down. Hence, on the site the image will overlap any wording (or anything else) which may be below. Where/How to I limit/change the number of pixels it can scroll? I know it read that it can do that. I would also need to learn on how to change the sides of the image (I need it on the right side), maybe make adjustments to the .js or .css, etc? Seems like a bit much.

Finding a simpler version might be the way to go unless you think it's easy to figure you how to make changes AND THEN add version 3.7 (and it's .css & .js) to the scripts I already have. But I have figure out how to keep the image in range FIRST and change the side it's on.

Here's the TESTING I did

[Nancy OShea]

johns45317965  wrote

Here's the TESTING I did

Fix your code.  Your document contains major structural errors.  See below for details.

Showing results for http://www.oneida-services.com/testingimage.html - Nu Html Checker

[Nancy OShea]

Sticky sidebar on the right.

<!doctype html>

<html lang="en">

<head>

<title>Bootstrap Affix Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

/* Note: Try to remove the following lines to see the effect of CSS positioning */

.affix { top: 20px; }

</style>

</head>

<body>

<div class="container-fluid">

<div class="jumbotron">

<h1>Bootstrap Affix Example</h1>

<h3>Fixed (sticky) vertical sidebar on scroll</h3>

<p>Scroll this page to see how the right sidebar behaves with data-spy="affix".</p>

<p><strong>The left sidebar sticks to the page when you have scrolled a specified amount of pixels.</strong></p>

</div>

</div>

<div class="container">

<div class="row">

<div class="col-sm-9">

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

<h1>Some text to enable scrolling</h1>

</div>

<--Sticky Right Sidebar-->

<div class="col-sm-3">

<div data-spy="affix" data-offset-top="325">

<img class="img-thumbnail" src="https://placeimg.com/200/360" alt="placeholder">

</div>

</div>

<!--/row--></div>

<!--/container--></div>

<!--All JS scripts here-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>