Sticky floating headers inside of overflowing divs
In our latest project, we have some pretty sweet designs that have headers that drift down in the page as the user scrolls. But at some point the header will hit the end of the containing div and need to stop. (We have a date header for each transaction. The header stops floating once the next day's header is met in the scroll). We had some luck using jquery plugin based on a good tutorial at Design Woop mixed with this updated Gist But this fell apart when trying to use it with a div that had overflow set to 'auto' or 'scroll'. Since the plugin was calculating location based on document not the div element. Plus the plugin operated on single elements not on jquery objects. CSS Looks like: div.scroll { background-color: #eee; width: 600px; height: 200px; overflow:scroll; } .header { float: left; height: 30px; width: 600px; background-color: black; color: white; font