Scroll an element only within some bounds

Question

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!

Answer 1

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.

Answer 2

Replace your CSS code with below and see if it helps:

CSS

  width: 970px;
  height: 60px;
  background: lime;
  text-align: center;
  white-space: nowrap;
  position: relative;
  margin: 0 auto 0 auto;
  left: 0;
  right: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: block;