UI 引导滚动选项卡:阻止第一个选项卡移动

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;
}

演示

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'});
    });
});

普伦克