Search code examples
javascripthtmlcssscroll

Scroll - Hide Content

I'm searching for a way to Hide the content when scrolled. Let me explain.

This from the Treehouse Website:

Normal Content:

enter image description here

When Scrolled:

enter image description here

As you see the content hides and the line appears. Go Check it out here

Has anybody an Idea how they did this?

Solution

  • This is because on scroll down of div

    They are adding a class shadowy to a

    <div class="heading-pocket"></div>

         .heading-pocket.shadowy {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); //cause of the shadow on top
        transition-duration: 0.2s;
    }

    On scrolling back to top they are removing the class shadowy