Question

我已经在滚动中添加了一个添加类功能，我已经在其他项目中使用过但这次不能正常工作，我不能为我的生活找出原因。我有一个元素我将类设置为opacity: 0，并在用户滚动了多个像素后添加了一个带opacity: 1的类

HTML

<nav id="icons">
    <ul>
        <li><a href="#">learn</a></li>
        <li><a href="#">solutions</a></li>
    </ul>
</nav>

CSS

#icons {
  position: fixed;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  list-style-type: none;
  background-color: transparent;
  width: 0px;
  border-bottom: none;
  opacity: 0;
  z-index: 20;
}

.show {
  opacity: 1;
}

的jQuery

$(window).scroll(function(){
    var fromTopPx = 700; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();

    if( scrolledFromtop > fromTopPx ) {
        $('#icons').addClass('show');
    } else {
        $('#icons').removeClass('show');
    }
});

Answer 1

问题可能与CSS specificity有关。从本质上讲，.show属性不会覆盖#icons属性，因为ID的特异性高于类。

我已将ID添加到show选择器。

＆＃13;

$(window).scroll(function() {
  var fromTopPx = 700; // distance to trigger
  var scrolledFromtop = jQuery(window).scrollTop();
  if (scrolledFromtop > fromTopPx) {
    $('#icons').addClass('show');
  } else {
    $('#icons').removeClass('show');
  }
});

＆＃13;

body {
  min-height: calc(100vh + 1000px);
}

#icons {
  position: fixed;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  list-style-type: none;
  background-color: transparent;
  width: 0px;
  border-bottom: none;
  opacity: 0;
  z-index: 20;
}

#icons.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav id="icons">
  <ul>
    <li><a href="#">learn</a></li>
    <li><a href="#">solutions</a></li>
  </ul>
</nav>

＆＃13;

或者，您可以删除课程而不是添加课程，这样您就不需要覆盖任何属性。

＆＃13;

$(window).scroll(function() {
  var fromTopPx = 700; // distance to trigger
  var scrolledFromtop = jQuery(window).scrollTop();
  if (scrolledFromtop > fromTopPx) {
    $('#icons').removeClass('hide');
  } else {
    $('#icons').addClass('hide');
  }
});

＆＃13;

body {
  min-height: calc(100vh + 1000px);
}

#icons {
  position: fixed;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  list-style-type: none;
  background-color: transparent;
  width: 0px;
  border-bottom: none;
  z-index: 20;
}

.hide {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav id="icons" class="hide">
  <ul>
    <li><a href="#">learn</a></li>
    <li><a href="#">solutions</a></li>
  </ul>
</nav>

＆＃13;

在滚动问题上添加类

1 个答案: