advanced sticky positioning

Question

i need to make some elements sticky or fixed. Its an angular project and i have already managed static and dynamic elements.

left menu is static and main content will be dynamic. main content has own top menu, content and footer.

i've added sticky position to sidebar-menu, header, action-panel.

But now sidebar position won't work, and i have some issue on header and action-panel such a box-shadow hidden;

here final result

here code with result preview

Answer 1

To make the sticky of right sidebar please replace this CSS with your aside tag.

aside {
    flex: 1 1;
    display: block;
}

.content header {
    height: 70px;
    width: 100%;
    position: sticky;
    top: 0px;
    background: #fff;
    margin-bottom: 10px;
}