标签不会固定在离子内部的离子含量

Question

我一直在尝试将离子片固定在离子含量内，但似乎不太可能。那么是否有任何方法可以将标签固定在离子中的可分解内容中？

        $( "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>

我没有使用离子标签，而是使用了我自己的自定义标签。让我知道离子片或任何定制的标签是否可以固定在可滚动的离子内容中

Answer 1

通过将待修复的内容放在<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>