Question

我有以下代码，当用户位于屏幕顶部时，它会应用一个类

$(window).on('scroll', function () {
  if ($(window).scrollTop() > 200) {
    $('#anim-nav').addClass('bg-fill');
    $('...').addClass('...');
  } else {
    $('#anim-nav').removeClass('bg-fill');
    $('...').removeClass('...');
  }
});

CSS

#anim-nav {
position: fixed; 
-webkit-transition: background 0.35s ease;
-moz-transition: background 0.35s ease;
-ms-transition: background 0.35s ease;
-o-transition: background 0.35s ease;
transition: background 0.35s ease;
}

.bg-fill { background: #fff; }

.screen-nav li a {
   position: relative;
   display: inline-block;
   font-size: 0.85em;
}

当.bg-fill被添加到＃anim-nav时，我希望链接为白色，当删除该类时，它返回黑色。它们目前处于默认黑色状态。

我想我可以通过添加和删除一个类（'...'区域以类似的方式完成它，但由于我需要为文本设置颜色而无法解决它

Answer 1

需要知道要正确应用的html结构。如果导航链接位于bg-fill下，则您可以按照以下方式申请。无需在Jquery中添加/删除其他类。

.bg-fill .screen-nav li a {
     color:#fff;
}

更改屏幕顶部的链接颜色

1 个答案: