Question

我已经阅读了很多关于词缀和侧边栏的问题，但要么我不理解，要么找不到解决问题的方法：

按照这里的建议，我制作了JS代码来动态定义偏移量（barrehaut是我标题的类）：

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

它运作良好

在另一个答案之后，我将导航div包装在“网格上”的另一个div中：

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

当然，我定义了我的Affix 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（@ media-screen）中使用相同的方法。

右边的Bootstrap词缀侧边栏

1 个答案: