Please note that this is in regard to UX in the wireframing stage only, so I’m using jsFiddle as a visual aid only.
I’m hoping someone can suggest a UI that I’ve actually never seen used.
I’ve got a lot of data that needs to be displayed in a fixed height scrolling div (this is an existing design, so no way around the outer scrolling window) and to make it more palatable, the client wants sub-data to be displayed in an accordian div that can be expanded and closed.
The problem is that the sub-data is also potentially lengthy and requires a fixed header so that the user understands what’s in each column. Please see the fiddle: http://jsfiddle.net/J5qFA/34/
You’ll have to use your imagination a little, but consider the grey bars as headers on expandable divs and the one labled as “Expanded” is a header that’s been clicked, showing its contents. (Note that expanding one header toggles closed any open div.)
The black bar is the data header and the yellow content is the data.
Is there a way to make the black bar “stick” to the top of the scrolling window so it’s always visible when the user navigates down the yellow content? Note that it shouldn’t appear over the top of any grey headers, so only needs to stick to the top of the scrolling window if the user scrolls down to see more yellow data.
And if not, is there a better way to ensure that the black header is always visible above the yellow data?
Oh, and I don’t want to nest scrollbars, obviously!
Hope this makes sense!