The whole page currently scrolls together, but I would like for
the top bar to remain fixed, i.e. unaffected by scrolling,
the tab headers to lock to the screen, and not go off the screen when the user would otherwise scroll past them, though the content behind should still scroll.
[font=arial]
Unfortunately, I am not very familiar with modern CSS or its capabilities and wonder if anyone has any tips on how such a UI might be implemented?
Are you developing a Vaadin application? In Vaadin the layout is determened by Java code, not by theme. Theme in Vaadin applications usually does not determine component’s position, though might slightly tweak it.
So probably you need a VerticalLayout, which has a HorizontalLayout as the first component (the header), then the banner, then a TabSheet. The VerticalLayout has full size (setSizeFull), and there’s an expand ratio on the TabSheet. The Tabsheet contains scrollable content.
Otherwise if you need to know about th CSS, the “position” attribute has a value “fixed”, which will make the element stay always in the view, but you would rarely want do that in a Vaadin app.
Is there anything in Vaadin theming, etc which supports fixing elements to the screen when scrolled? For example, in the Responsive classes or Valo theme?
If no, could anyone point me in the right example for the 2nd case, where the element starts at e.g. top +200pixles but stays locked to the screen when scrolled past? Is a pure CSS solution possible or is JS necessary? In that case, is there a Vaadin something or other to help?
There is a pure CSS solution. Position attribute either fixed or absolute, depending on your DOM structure.
In Vaadin you have the Window component, that’s exactly what you are looking for, it will stay when the content underneath is scrolling. Style it according to your needs.