How do you stick an image to the left side of a div when upon scroll, it moves with the div?

Question

Currently, I'm making a personal website and I have an about me section. The about me section has a lot of text and I want an image to be positioned the left side of the div (contains all the text).

As you scroll through the text, I want the image to follow, so that you can see it as you scroll down the div. This means that the image is moving (pushing down) as scroll happens. How would you do this?

To make matters a little more complicated, I have ap within the div that is hidden and is toggled on or off with jquery. This adds more height to the original div.

HTML:

<section id="about" class="container content-section">
    <div class="row">
        <div class="col-xs-6 col-md-4">
            <img src="img/pic.jpeg" height="300" width="300" class="bio-pic" style="display:inline">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-8" style="display:inline; ">
            <h2>About Me</h2>
            <h4>the present</h4>
            <p>Hi! I'm Ashley.</p>
            <h4 class="thepast">the past <i class="fa fa-angle-down"></i></h4>
            <p class="thepasttext">text of about ~300 words or more</p>
            <h4>the future</h4>
            <p>small blurb of text</p>
        </div>
    </div>
</section>

CSS:

.thepasttext {
    display: none;
}

jQuery:

$(document).ready(function(){
    $('.thepast').click(function(){
        $('.thepasttext').toggle();
    });
});

Answer 1

You should try in CSS add

position: fixed;

to your div with img.