Question

嵌套类与Javascript一起使用的正确方法是什么？

我有一个使用jQuery的动画标题，在页面上175px后收缩;我还希望使用background: rgba()（不是opacity:;）来降低其不透明度。

不幸的是，Bootstrap为background-color和height使用了两个单独的div和类。一个类.navbar-default影响颜色，另一个类.navbar-brand影响高度。

这是我的代码：

JS：正如您所看到的，当滚动超过175px时，我已将.shrink设置为.navbar-brand和.navbar-default。否则，.shrink类将被删除。

<script>
  $(function(){
    var shrinkHeader = 175;
    $(window).scroll(function() {
      var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
        $('.navbar-brand, .navbar-default').addClass('shrink');
      }
      else {
        $('.navbar-brand, .navbar-default').removeClass('shrink');
      }
    });
    function getCurrentScroll() {
      return window.pageYOffset || document.documentElement.scrollTop;
    }
  });
</script>

HTML：这是典型的Bootstrap导航栏布局。

      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container navbarfix">
          <div class="navbar-header">
            <a class="navbar-brand page-scroll svg" href="link">
            <!-- logo code here -->
            </a>
          </div>
          <!-- links here -->
        </div>
      </nav>

SASS：这是我的SASS代码，与CSS非常相似，所以我确定你可以解决它。

正如您所看到的，收缩类应该更改两个嵌套类的height和background，但它只会更改高度。所以我的问题是如何正确格式化？

$header_l: 180px
$header_s: 105px

.navbar-brand
  height: $header_l
  transition: height 0.2s

.navbar-default
  background: rgb(241,241,242)
  background: transparent\9
  background: rgba(241,241,242,1)
  transition: all 0.1s

.shrink
  .navbar-default
    background: rgba(241,241,242,0.75)

  .navbar-brand
    height: $header_s

CSS（SASS编译到此）

.navbar-default {
  background: #f1f1f2;
  background: transparent\9;
  background: #f1f1f2;
  -webkit-transition: all 0.1s;
  transition: all 0.1s
}

.navbar-brand {
  height: 180px;
  -webkit-transition: height 0.2s;
  transition: height 0.2s;
}

.shrink .navbar-default {
  background:rgba(241,241,242,0.75);
}

.shrink .navbar-brand {
  height:105px;
}

Answer 1

.shrink .navbar-default {
    background:rgba(241,241,242,0.75);
}

这是在缩小类下找到.navbar-default类的元素。所以，它基本上假设你有一个结构

<div class=shrink> <div class="navbar-default"> </div> </div>

您想要的是将其应用于同时包含shrink和navbar-default的元素，以便您可以

.shrink.navbar-default { background:rgba(241,241,242,0.75); }

Answer 2

我的怀疑：

其他课程过度使用.shrink的设置

试试这个：

在设置值之后添加“！important”，不加引号或空格，将此设置优先于所有相同级别的类。

代码：

.shrink {
   Background: rgba(241, 241, 242, 0.75)!important;
   Height:105px!important;

}

丹尼尔也提出了一个非常好的观点：

当你在选择（.shrink .navbar-default）中的类之间放置一个空格时，它会查找带有.shav的父元素内的.navbar-default的子元素。删除空格应该同时选择两个类的元素。

：）

让我知道怎么回事，我乘坐10个小时的巴士。我有时间。

KA

嵌套CSS类以用于Javascript

2 个答案: