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

CSS

Posted by Jordan Bowman
Jordan Bowman
9,439 Points

Shadow when scrolling

On this Treehouse website there's a feature I want to learn how to do. In the left column of content, a nice little shadow appears at the top ONLY when you start scrolling down. The top bar and sidebar remain fixed – I already know how to do that but I'm wondering how to get the shadow to appear when you start scrolling, but not be there while it's at position zero at the top. If this can be done completely with CSS (no JS), that would awesome.

4 Answers

Jordan Bowman
Jordan Bowman
9,439 Points

I love you.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Not sure if it can be done with just CSS but here is a jquery solution hope it helps. I must say i never even noticed that shadow but now i have it does look elegant.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I do not think this is possible with current CSS. I'd guess that future versions of CSS will likely be able to do things on scroll, but today we are left with javascript.

They are adding a class named "shadowy" to an empty div with the class heading-pocket on scroll. When you're at the top of the page, shadowy is removed from the html markup. That class holds the CSS box shadow.

I think a solution like Adam listed above would be your simplest way to go today. Since it is an aesthetic feature, you'd be fine if it didn't show if the user had JS disabled, or you could have it show even when scroll was at 0 to a user without JS. Either would be okay.

Jordan Bowman
Jordan Bowman
9,439 Points
Jordan Bowman
Jordan Bowman
9,439 Points

Thank you Adam and Kevin! I'll look into the jquery.