Grow your CSS skills. Land your dream job.

CSS make div fixed after scrolling towards bottom of it

  • # November 14, 2013 at 6:08 pm

    I have a div with an image in it, and a title above it and towards the bottom center of it.

    I have paragraphs/information below the image/title div and would like the area that you can see the title to be ‘fixed’ once the user scrolls far enough down the page to become a header for the content relating to it below.

    Any help is greatly appreciated, thank you.

    # November 15, 2013 at 9:30 am

    Are you talking about something like a fixed header, similar to what was often done with frames years ago?

    You could set the header DIV to a position of “fixed”, as in the example below:

    http://cdpn.io/bqIjL

    Ed
    # November 16, 2013 at 11:44 am

    An image, screen recording, or website that implements this effect would be very helpful – it’s sort of difficult to understand what you want.

    I’ve made a CodePen with what I think you want.

    Also note that my solution will only work if you have one element in the page you want to fix so please don’t use it! If you clarify a bit more maybe we can help you more.

    # November 18, 2013 at 5:38 pm

    Tom Houy, you sort of had it, but Ed knows what I am talking about.

    Would it be possible to do that effect with just a chunk of the element showing (say if it were much taller and only the bottom 50px were to be visible once the entire element become fixed, it would be then at the top of the screen as a header element).

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".