I have a fixed div box on the right, and I want to make it so that as the page scrolls, the content in the box changes according to the content on the left that corresponds to it using I need some help because I don't know how to do this using jQuery.

Here is an example animation of what I mean:

This question shows very little by the way of effort, but just to get you started, you could use Bootstrap Scrollspy and then hide any links without the active class.

If this doesn't meet your needs, please use this as a starting point to ask a more focused question in the future.

Demo in Fiddle

1. First, setup all of your section headers as list items like this:

   <!-- language: lang-html -->

    <div id="sidebar">
        <ul class="nav">
            <li><a href="#Content1">Content 1</a></li>
            <li><a href="#Content2">Content 2</a></li>
            <li><a href="#Content3">Content 3</a></li>
        </ul>
        Lorem Ipsum
    </div>
   

2. Then add scrollspy to the page, targeting the #sidebar you just created

   <!-- language: lang-js -->

    $('body').scrollspy({ target: '#sidebar' })
   

3. Then style all lis as hidden, but override the active one to make it visible:

   <!-- language: lang-css -->

    #sidebar li        { display: none;  }
    #sidebar li.active { display: block; }
   

Screenshot: