Making the objectheader sticky and rest of the page scrollable - html

Question

I have a page with an ObjectHeader and 4 panels. All the panels have a table with a horizontal scrollbar. I want to freeze the object header at the top whenever the page is scrolled. I tried the sticky property but it is not applicable for ObjectHeader but it is applicable to IconTab Bar. But in my case, I can't use IconTab Bar. I also tried some CSS but failed Please help. Below is my XML code.
XML Code :
<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:t="sap.ui.table" xmlns="sap.m"
controllerName="sap.hmel.pymt.adv.controller.PaymentAdviceApp" displayBlock="true">
<App>
<pages>
<Page showHeader="false" showNavButton="true" navButtonPress="onCallPayAdvice">
<ObjectHeader title="" fullScreenOptimized="true" >
<attributes>
<ObjectAttribute title="Total Credit Values" text="+ ₹ {credModel>/header/TotalCreditItem}"/>
<ObjectAttribute title="Total Debit Values" text="- ₹ {credModel>/header/TotalDebitItem}"/>
<ObjectAttribute title="Balance" text=" ₹ {credModel>/header/TotalBalance}"/>
</attributes>
<statuses>
<ObjectStatus title="Selected Credit Values" text="+ ₹ {detail>/crdTotal}" state="{detail>/utrState}"/>
<ObjectStatus title="Selected Debit Values" text="- ₹ {detail>/invTotal}" state="{detail>/totalState}"/>
<ObjectStatus title="Balance" text=" ₹ {detail>/balance} {detail>/Waers}" state="{detail>/balState}"/>
</statuses>
</ObjectHeader>
<Panel expandable="true" headerText="Payment Document ( Subtotal : + ₹ {credModel>/header/PaymentSum})" class="sapUiMediumMarginBegin"
id="paymentPanel">
<ScrollContainer vertical="true">
<Table class="sapUiLargeMarginBottom" items="{credModel>/Payment}" growingThreshold="5" fixedLayout="false" id="paymentDocument"
growing="true" growingScrollToLoad="true" inset="false" mode="MultiSelect" selectionChange="onRowSelectionChangePayment">
<columns>
</columns>
<items>
<ColumnListItem id="columnTempId">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<Panel expandable="true" headerText="Credit Note (Subtotal : + ₹ {credModel>/header/CreditSum})" class="sapUiMediumMarginBegin">
<ScrollContainer vertical="true">
<Table sticky="HeaderToolbar,ColumnHeaders" class="sapUiLargeMarginBottom" items="{credModel>/Credit}" id="creditNote" growing="true"
growingScrollToLoad="true" growingThreshold="5" mode="MultiSelect" selectionChange="onRowSelectionChangeCredit">
<columns>
</columns>
<items>
<ColumnListItem id="column">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<Panel expandable="true" headerText="Invoice (Subtotal : - ₹ {credModel>/header/InvoiceSum})" class="sapUiMediumMarginBegin">
<ScrollContainer vertical="true">
<Table class="sapUiLargeMarginBottom" items="{credModel>/Invoice}" fixedLayout="false" id="invoice" growingThreshold="5" growing="true"
growingScrollToLoad="true" inset="false" mode="MultiSelect" selectionChange="onRowSelectionChange">
<columns>
</columns>
<items>
<ColumnListItem id="columnTemp">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<Panel expandable="true" headerText="Debit Note (Subtotal : - ₹ {credModel>/header/DebitSum})" class="sapUiMediumMarginBegin">
<ScrollContainer vertical="true">
<Table class="sapUiLargeMarginBottom" items="{credModel>/Debit}" growingThreshold="5" fixedLayout="false" id="debitNote" growing="true"
growingScrollToLoad="true" inset="false" mode="MultiSelect" selectionChange="onRowSelectionChangeDebit">
<columns>
</columns>
<items>
<ColumnListItem id="columnId">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<footer>
<Bar>
<contentRight>
<Button text="Create" type="Accept" id="btnCreateId" press="onCreate"/>
<Button text="Cancel" type="Reject" icon="sap-icon://decline" press="onCancel"/></contentRight>
</Bar>
</footer>
</Page>
</pages>
</App>