#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
Уважаемые пользователи Интернета, у меня есть этот css amp; 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>
Комментарии:
1. Не могли бы вы выбрать вопрос как принятый, если он показался вам полезным?
Ответ №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>