Question

亲爱的互联网人们，我有此CSS和HTML代码可向我的目标网页添加滚动指示器。我的目标是向下滚动时，指示消失，仅在重新加载页面后再次出现。我的jquery似乎无法正常工作，任何帮助不胜感激！

$(window).scroll(function() {

 if ($(this).scrollTop()>0)
  {
     $('.scrolli').fadeOut();
  }
 });

body{
  margin: 0;
  padding: 0;
  background: #000;
}
.scrolli{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.scrolli span{
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
  animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
  animation-delay: -0.4s;
}
@keyframes animate{
  0%{
    opacity: 0;
    transform: rotate(45deg) translate(-20px,-20px);
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: rotate(45deg) translate(20px,20px);
  }
}

<div class="scrolli">
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 1

您的代码很好，它不能工作，因为没有可用的滚动，因此$（this..scrollTop（）永远不能大于零。

通过使身体更高，可以看到它起作用：

$(window).scroll(function() {

 if ($(this).scrollTop()>0)
  {
     $('.scrolli').fadeOut();
  }
 });

body{
  margin: 0;
  padding: 0;
  background: #000;
  height: 200vh;
}
.scrolli{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.scrolli span{
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
  animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
  animation-delay: -0.4s;
}
@keyframes animate{
  0%{
    opacity: 0;
    transform: rotate(45deg) translate(-20px,-20px);
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: rotate(45deg) translate(20px,20px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolli">
  <span></span>
  <span></span>
  <span></span>
</div>

如何在滚动条上隐藏滚动条？

1 个答案: