cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Fixed the header after scrolling and move the background until the end of the document. WATCH FULLSCREEN FOR BETTER EXPERIENCE Take a look at the photo on top during scrolling :)


  1. why is there left over space to scroll at the end? (chrome)

  2. Not bad ! But you should toggle class instead of style it in javascript

  3. @bulby97 don't know why I didn't think on that :O Btw, thanks for the tip!

  4. More than the effect I actually like the subject you picked for this pen.

  5. @pixelass it's a casual article from Medium :)

  6. @dghez .. I know (linked on the bottom).. still it's a lot nicer than some lorem-boring-ipsum.. also gives the impression that you care ;) I've known a few kids with down syndrome ("known".. sadly). I bet the girl on the horse is having the time of her life

  7. @dghez beautiful code. just a question, is this responsive? I'm in responsive mode on dev tools in safari and it seems to be working just fine. But i am trying to open up on my actual phone and it doesn't seem to be loading. any idea on what is going on?

  8. @twesh I checked on my OnePlus and everything works fine. The problem depends on the ratio of the image, as you can see on mobile there isn't any image part to scroll.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.