Bailey_South_Dakota
New Member
I'm using \[code\]position:fixed\[/code\] to float some headers in my table when the user scrolls past the top, ala this method: http://css-tricks.com/persistent-headers/Everything works great on regular pages, but whenever I have a table inside of another div or something with a fixed height and \[code\]overflow:auto\[/code\] it blows up spectacularly.What do I need to do to account for not just the page-wide scrolling, but also the scrolling of my container? And to account for scrolling past the 'top' of said container?Thanks for any direction you guys can point me in.Here's my existing code:\[code\]var mainheader = table.rows[0];var tableHeight = table.getHeight();var tableScroll = table.viewportOffset();var headerHeight = mainheader.getHeight();// TODO: If we're scrolling a subcontainer, we need to get the offset for that too! Somehow?// If tableHeight < 1, it means our table his hidden right now, so skip itif (tableHeight < 1) continue;// If we've scroll down past the very tip top of the table, but haven't yet scroll past the end of it, show our floating headersif (tableScroll.top < 0 && tableHeight + tableScroll.top - headerHeight > 0){ table.floatingheader.style.display = ''; // Handle horizontal scrolling too! table.floatingheader.style.left = (tableScroll.left + 1) + 'px'; // 1px offset for border}else table.floatingheader.style.display = 'none';\[/code\]NOTE: I have access to prototype.js, but do not have jQuery or any other 3rd party library. :/