tabs doesnt get fixed in ionic inside ion-content - tabs

Question

I have been trying making ion-tabs fixed inside ion-content but it hardly seems posssible. So is there any way of making tabs fixed inside a scollable content in ionic?
$( "ion-content" ).scroll(function() {
var scrollWidth = $(".main-content").height()-$(".header-bar").height();
if (parseInt($(this).scrollTop()) > scrollWidth ) {
$("#fixedAboutTabs").addClass("fixed");
});
}
else {
$("#fixedAboutTabs").removeClass("fixed");
});
.fixed{
left: 0;
top:44px;
position: fixed;
z-index:100;
width: 100%;
}
<ion-view>
<div class="header-bar">
<button class="button button-clear arrow-btn" ng-click="goBack()"> <img src="img/arrow.png" class="arrow-img"> </button>
<h1 class="title">{{product.productName}}</h1>
</div>
<ion-content on-scroll="onScroll()" overflow-scroll="true" has-bouncing="false">
<div class="main-content">
<img src="img/video.png" class="video-img">
<div class="product-info">
//some content here
</div> <!--product info closes -->
</div> <!--main content closes-->
<div id="staticAboutTabs" class="demo-tabs">
<ul>
//customized tabs (want to make this tabs fixed bewlow header-bar)
</ul>
</div>
</ion-content>
</ion-view>
Instead of ion-tabs i have used my own customized tabs. let me know if the ion-tabs or any custom made tabs can be fixed inside scrollable ion-content

Answer 1

Try this by placing the to-be-fixed content inside <div slot="fixed"> </div>
<ion-content>
<div slot="fixed">
<ion-tabs #tabs tabsPlacement="top">
<ion-tab-bar slot="top" tabsHighlight="true">
<ion-tab-button tab="tab1">
<ion-label>Tab1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Tab2</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</div>
</ion-content>