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

Design

Maui Aerial
PLUS
Maui Aerial
Courses Plus Student 100 Points
Posted by Maui Aerial
Maui Aerial
Courses Plus Student 100 Points

How did you create your Treehouse website scroll effect with the sticky slit on top where page elements slide into?

What code elements used in building the Treehouse website, especially the scroll effect sliding into top part of your website? Is it a Javascript code or CSS effect? Any or all info would be appreciated! Ty!

3 Answers

bbvjjwjaqq
bbvjjwjaqq
1,849 Points
bbvjjwjaqq
bbvjjwjaqq
1,849 Points

Do you mean the visual effect, that the content disappears behind the header when you're scrolling the page?

It seems like they simply added a box-shadow under the header (in this case it's a ul element) when the page is scrolled.

$(window).scroll(function(){
    if ($(this).scrollTop() > 0 {
        $(header).css("box-shadow","0 4px 2px -2px #000;");
    } else {
        $(nav).css("box-shadow","none");
    }
});

Hope this helps!

paulbacon
paulbacon
21,926 Points
paulbacon
paulbacon
21,926 Points

Guil produced a forum tip explaining how it was done... :)

https://teamtreehouse.com/forum/forum-tip-page-pocket-scroll-effect