Sticky div when scrolling

Hi,

I need to build a layout (a summary box) inside my application which is always visible. An easy approach would be to just use css “position: fixed;” but the footer is in my way, so I want to depend the css-properties on the vertical scroll-position.
In a normal HTML-page this is pretty easy by using javascript “function onScroll(e) {}” and changing the position accordingly. Example: http://jsbin.com/omanut/2
What would be the best starting point to implement such feature in Vaadin?

Thanks in advance!

Hi,

I am afraid it is not possible with pure server-side components, so you would have to get your feet wet with GWT development. I would start with reading
Custom Component development section of the wiki
.

On the client-side you will have all the tools you’d need to develop such a component: ScrollPanel widget that accepts ScrollEventHandlers, your header would be just an Element, that you’d append to the panel. You could adjust the top of your header element in an internal scroll handler.

Hope this helps,
Aleksandr

I just made (experimental) a simple add-on for this purpose: https://vaadin.com/directory#addon/sticky