tabs in ionic framework

I am currently facing some issues related to ionic-tabs and Floating tabs concept.

Blockquote

Currently using ionic framework..I am building a mobile app in which I want **tabs** to get **fixed** below header once the page is scrolled till the position where the tab is. I have kept ion-tabs inside ion-content.

After getting the scroll position I have added a class "fixed". As it adds the class fixed,the background changes to white (no content visible) and the tabs get hidden instead of getting fixed at the position below header.

$scope.onScroll = function() {
        
              var scrollWidth = $(".bar".height() + $(".maincontent".height();                        console.log($ionicScrollDelegate.getScrollPosition());
                     console.log(scrollWidth);
                if (parseInt($ionicScrollDelegate.getScrollPosition().top) >  scrollWidth) {
                     
                     $('ion-tabs').addClass('fixed');
                    }
                   else{
                    $('ion-tabs').removeClass('fixed');
                   }
                };
        .fixed{
            left: 0;
            top:44px;
            position: fixed;
            z-index:100;
            width: 100%;
        }
<ion-view>
        <ion-header-bar class="bar bar-positive">
        </ion-header-bar>
        
        <ion-content on-scroll="onScroll()">
            <div class="main-content">
    
            <!-- some content here -->     
          
            </div>
            <ion-tabs class="tabs-icon-top tabs-color-active-dark tabs-background-positive tabs-striped tabs-top">
                <!-- About Tab -->
                <ion-tab title="About" >
                    <ion-nav-view>
                             <div> 
                               <!--some tab content -->
                             </div>
                    </ion-nav-view>
                </ion-tab>
        
    <!--update Tab -->
                <ion-tab title="Updates">
                    <ion-nav-view animation="slide-left-right" >
                        <ion-view>
                            <ion-content scroll="false">
    
                               <!-- some other tab content -->
    
                            </ion-content>
                        </ion-view>
                    </ion-nav-view>
                </ion-tab>
            </ion-tabs>
        </ion-content>
    </ion-view>

I have been playing with the ionic.css file and I found a solution for fixed tabs, but like I say you will have to edit the ionic.css file.

You must edit this:

.tabs-top.tabs-striped
{
   padding-bottom: 0;
   position: fixed;
   z-index: 9999
}
.tabs-top > .tabs, .tabs.tabs-top 
{
  top: 44px;
  padding-top: 0;
  background-position: bottom;
  border-top-width: 0;
  border-bottom-width: 1px;
  position: fixed;
  z-index: 9999 
}

With this you will have the ion-tabs fixed, but if you want that bar-header will also be fixed, then edit this

.bar-header 
{
  top: 0;
  border-top-width: 0;
  border-bottom-width: 1px;
  position: fixed;
  z-index: 9999 
}

I hope this work for you