自举贴上栏上

Question

我读了很多关于词缀和工具条的问题的权利，但无论是我不明白好或我无法找到解决我的问题：

继咨询发现在这里，我做了JS代码，以动态定义偏移（barrehaut是类我的头的）：在另一个DIV

var y = $('.barrehaut').height(); 
     $('nav').affix({ 
      offset: { 
      top: y 
     } 

，它的工作以及

以下的其他答案，我包裹着我的资产净值股利“上网”：

<div class="col-md-3 hidden-print"> 
    <nav class="bs-docs-sidebar"> 
     <ul class="nav"> 
      <li class="active"><a href="#1">Environnement requis pour accéder au service EDIFLEX</a> 
       <ul class="nav nav-stacked"> 
        <li><a href="#1p1">Préambule</a></li> 
        <li><a href="#1p2">Connexion via internet</a></li> 
        <li><a href="#1p3">Conseils pour l'utilisation du logiciel de navigation</a></li> 
       </ul> 
      </li> 

    </nav> 
</div> 

，当然，我定义我的词缀CLASSE：

.affix { 
    top: 0; 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: 20px; 
    position: fixed; 

    -webkit-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
} 

两个问题：

1 - 如何让我当窗口大小小于XX PX我的菜单中消失了？ （因为col-md-3将没有词缀）

2-有没有一种方法根据包装的宽度（col-md-3在我的情况下）来动态修复词缀类的宽度，以便当看不到菜单变化时固定在顶部？我知道如何通过JS添加或删除类，但不知道如何更改CSS类的属性，这有可能吗？

Answer 1

我设法做到了！

要当窗口大小小于992像素（像的Col-MD-3），我使用的CSS菜单消失：

.affix { 
    top: 0; 
    padding-right: 15px; 
    padding-left: 0px; 
    margin-right: 20px; 
    position: fixed; 
    display: none; 

    -webkit-transform: translate3d(0, 0, 0); 
     -o-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
} 

@media screen and (min-width:992px){ 
    .affix { 
     display:block; 
    } 

而要保持良好的宽度，我强迫宽度使用JS资产净值：

$(function(){ 
     var y = $('.barrehaut').height(); 
     var x = $('.nav').width(); 
     $('.nav').css({"width":x}); 
     $('nav').affix({ 
     offset: { 
     top: y 
     } 

但我觉得我可以用在我后来发现的CSS（@媒体屏幕相同的方法）。