无法使Sticky工作

时间:2017-10-03 08:45:02

标签: css zurb-foundation sticky

我有一个带有左侧边栏和主要内容的网格。我试图将搜索字段放在左侧边栏的顶部,但我无法使其工作。代码是:

<div class="cell medium-auto medium-cell-block-container">    <!-- MAIN CONTENT -->

  <div class="grid-x grid-padding-x"> <!-- GRID -->
    <div class="cell medium-2 medium-cell-block padding-top-1" data-sticky-container>    <!-- LEFT SIDEBAR -->

      <div class="input-group sticky" data-sticky data-margin-top="0">
        <input class="input-group-field" type="search" id="inputSearch" name="inputSearch" #inputSearch placeholder="Search objects..." (keyup)="onSearchType($event.target.value)">
        <div class="input-group-button">
          <button class="button primary" [disabled]="!inputSearch.value.length" (click)="onSearchType(''); inputSearch.value=''">Clear</button>
        </div>
      </div>

      <ul class="accordion" data-accordion data-multi-expand="true">
        <li class="accordion-item is-active" data-accordion-item>
          [....]
        </li>
        <li class="accordion-item is-active" data-accordion-item>
          [....]
        </li>
        <li class="accordion-item is-active" data-accordion-item>
          [....]
        </li>
      </ul>

    </div>  <!-- LEFT SIDEBAR -->

    <div class="cell medium-10 medium-cell-block padding-top-1">  <!-- CONTENT -->

      [....]

    </div>  <!-- CONTENT -->

  </div>  <!-- GRID -->

</div>    <!-- MAIN CONTENT -->

我想要定位的是左侧边栏内的'input-group sticky'div。我错过了什么吗?谢谢!

0 个答案:

没有答案