标签没有固定在 ionic inside ion-content答案

【问题标题】：tabs doesnt get fixed in ionic inside ion-content标签没有固定在 ionic inside ion-content
【发布时间】：2015-03-20 05:14:50
【问题描述】：

我一直在尝试将 ion-tabs 固定在 ion-content 中，但这似乎不太可能。那么有什么方法可以将标签固定在 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>

我使用的是我自己定制的标签，而不是 ion-tabs。让我知道离子标签或任何定制标签是否可以固定在可滚动的离子内容中

【问题讨论】：

欢迎来到 Stackoverflow。分享一下你尝试过的代码sn-ps。
@Daenarys 我现在添加了一些代码 sn-ps.. 看看你现在是否可以帮助我
你想要页脚标签还是页眉标签？代码 sn-p 并没有给出确切的想法。

标签： tabs fixed ionic

【解决方案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>

【讨论】：