Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Posted by Phil White
Phil White
Courses Plus Student 9,519 Points

How do i make a fixed sidebar where you click on a image and then it links to a paragraph of text?

Hi All,

I want to make a fixed side bar where i have 4 images and then when you click on one of the images it takes you to the connected paragraph but the side bar stays put

Here's the site

www.pixelsky.co

Im referring to the about page

Thanks in advance!

2 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

To make the web site scroll smoothly to the paragraph you are going to need some javascript, here's a link to a css-tricks code snippet that will help. The easiest way is to giving each paragraph an id and the set the respective links href to the id. For, example:

<div id="paragraph-1">
 </div>
...
<a href="#paragraph-1"> Link to Paragraph 1</a>

You will also need javascript to make the side bar stay put. Here is a link to a stackoverflow answer that should help.

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

okay got ya i will try to learn some Javascript now. Thanks for your help!

Mark Josephsen
Mark Josephsen
8,803 Points
Mark Josephsen
Mark Josephsen
8,803 Points

Like this:

html
<a href="#one">Click here</a>
<!-- random content... -->
<a id="one"></a><p>Hooray!</p> <!-- When you click the above link, you'll land here -->
Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Yeah i've done that but now i need to put the images in a fixed side bar and i'm not sure how to do that?