0

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

按照此处找到的建议，我制作了 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 类的属性，这可能吗？

4

1 回答 1

0

我设法做到了！

当窗口大小小于 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) 中使用相同的方法。

于 2014-08-28T15:19:11.450 回答