时间戳

首页 > 解决方案 > 在滚动问题上添加类

jquery - 在滚动问题上添加类

问题描述

我在滚动上添加了一个添加类功能，我在其他项目中使用过，但这次它不能正常工作，我一生都无法弄清楚原因。我有要添加要设置的类的元素，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');
    }
});

标签： jquery

解决方案

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

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

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

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

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

推荐阅读