This question shows *very little* by the way of effort, but just to get you *started*, you could use [Bootstrap Scrollspy](http://getbootstrap.com/javascript/#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][fiddle]

1. First, setup all of your section headers as list items like this:

    
    
        <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

    
    
        $('body').scrollspy({ target: '#sidebar' })

3. Then style all `li`s as hidden, but override the active one to make it visible:

    
    
        #sidebar li        { display: none;  }
        #sidebar li.active { display: block; }

### Screenshot: 

[![screenshot][screenshot]][fiddle-demo]


[fiddle]: http://jsfiddle.net/KyleMit/U7d2y/
[fiddle-demo]: http://jsfiddle.net/KyleMit/U7d2y/show
[screenshot]: http://i.imgur.com/YloVVYe.gif

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:
![\[Example\]()][1]


  [1]: http://i.stack.imgur.com/NKhdB.gif