ui-bootstrap 滚动标签：防止第一个标签移动

Question

我使用 ui-bootstrap

创建了一个滚动标签集

我需要第一个选项卡即使在滚动时也始终显示

非常感谢

阿维

我的代码：

  <tab ng-repeat="tab in tabs" active="tab.active" disabled="tab.disabled">
    <tab-heading>

        <div class="img-thumbnail center-block TypeItem">
            <div class="typeTitle">{{tab.title}}</div>
        </div>
    </tab-heading>
    <div class='tab-content'>{{tab.content}}</div>
  </tab>
</tabset>

CSS:

      .nav li {
          display:table-cell !important;
          float: none !important;

      }

Answer 1

CSS

.nav li {
  margin-left:100px; 
  left:136px;
}

.nav li:first-child{
  position:fixed;
  left:-100px;
  z-index:1;
  background-color:#515151;
}

DEMO

Answer 2

您也可以使用 'position:absolute' 来完成此操作。喜欢

.nav li {
  margin-left:100px; 
  left:136px;
}

.nav li:first-child{
  position:absolute;
  left:-100px;
  z-index:1;
  background-color:#515151;
}

Answer 3

CSS

.nav {
    position: relative;
    padding-left: 150px;
}

.nav li:nth-child(1) {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}

JS（需要jQuery）

$(function() {
    var wrap = $('.typeLineBgHolder');
    var nav = wrap.find('.nav');
    var liFixed = nav.find('li').eq(0);

    wrap.scroll(function() {
        var leftPos = Math.abs(nav.offset().left);
        liFixed.css({left: leftPos + 'px'});
    });
});

Plunker

ui-bootstrap 滚动标签：防止第一个标签移动

ui-bootstrap scrolling tabs: prevent first tab from moving

css

angular-ui