Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jquery On Scroll effect Bottom Banner

Hi everybody,

I want to try to get a bottom banner to my website. Similar to a stick nav when some one scrolls down the nav attaches itself to the browser window. I am trying something similar to an element mid-way of the webpage where it will get attached to the bottom of the window and dis-attach when scrolled back up.

Chris

John Coolidge
John Coolidge
12,614 Points

I'm not sure if I understand you correctly. You have a banner on the page that is half-way down. Then when you scroll down the page, it sticks to the bottom.

When you scroll down, the banner in the middle of the page is going to rise to the top of the page. You could then stick that banner to the top (this happens on your Treehouse profile page when you scroll down, as an example).

You can definitely stick it to the top but I'm not sure if when you scroll down you can get it to stick to the bottom, since the banner would naturally move to the top of the window upon scrolling down.

Could you elaborate more please?

John

2 Answers

Did a quick Google search and ran across something called hcsticky. Looks like it might give you the functionality you're looking for. If not, try another search, there seem to dozens of sticky-type plug-ins.

Thank you Joe, That is what I am looking for. I did research other plugins to us but I had unsuccessful attempts. This plugin worked perfectly. Thank you again.