Search code examples
javascriptjqueryhtmlcssparallax

Scroll an element only within some bounds

I am building the following layout which can be viewed here:

http://www.freemicsnyc.com/Other%20Versions%20&%20Backup/FreemicsNJ/new_template.html

You will notice the one div with the days of the week (mon, tues, wed, ..) does not scroll with the rest of the page since it is styled with the following css:

.column_headings{

    ...not important stuff

    position: absolute;
    margin: 416px auto 0 auto;
    left:0;
    right:0;
}

This behavior is not what Im looking for.

What I would like, is for that div to scroll along with the rest of the page like normal until it gets to the very top of the viewport, at which point it would stay there like a sticky header as the remainder of the content scrolls beneath it.

Would I need parallax scrolling for this? JQuery? Is there a way to do it with just CSS?

Any help would be much appreciated!

Solution

  • You can use a jQuery plugin such as: http://stickyjs.com/ for now as the full css implementation of this, position: sticky has very low browser support as of the moment.