sticky or fixed appbar, but separated from the content

[Vedad]

Hi,

I would like to use kendo appbar as header in sticky or fixed mode, but I would like to use it separately from rest of the page.

What I mean by this is that my content container doesn't scroll under appbar, but preserves its position and contents is scrolled only within this container.

Reason for this is that I have a menu which I want to preserve fixed and visible all the time, as well as drawer widget on the side of the screen.

With current setting, when page contains more data, my menu and half of drawer is also scrolled under appbar, what renders them useless.

Is there a way to set app bar in a way where rest of the page content is self contained container and not scrolled under appbar?

Thank you and regards,

Vedad

 

[Preslava]

Hi Vedad,

The AppBar component provides several options for positioning: static, sticky and fixed.

The fixed position will place the AppBar over the page content when the content is scrolled, which will result in the specified behavior - parts of the content may become invisible. In this case, either a padding of the page content should be defined or the position mode should be set to sticky.

The sticky position will hide the page content under the AppBar only when the page is scrolled. 

More information can be found here:

https://www.telerik.com/kendo-angular-ui/components/navigation/appbar/positioning/#toc-position-mode

The specified behavior is a custom scenario and depends on the arrangement of the page contents.

I have prepared an example to demonstrate how this can be achieved:

https://stackblitz.com/edit/angular-axp8xc?file=app/app.component.ts

I hope this helps. Let me know how this goes.

Regards,
Preslava
Progress Telerik

[Vedad]

Hi Preslava,

Indeed it works. It seems that some of our custom in page structure is making this problematic.

Thanks a lot.

Regards,

Vedad