как сделать так, чтобы стрелка вниз исчезала, когда пользователь прокручивал страницу вниз?

Question

Когда пользователь прокручивает вниз, как я могу сделать так, чтобы стрелка вниз на первом экране исчезла?

0

Я хочу, чтобы значки со стрелками вниз исчезали, когда пользователь прокручивал вниз стр. Хотя я искал его по другому вопросу stackoverflow, я не могу найти решение. Я сделал jQuery код. Я не уверен, что это правильно или нет.

это код на скрипке https://jsfiddle.net/92mtjzew/

$(document).ready(() => {
    $('#slideshow .slick').slick({
        autoplay: true,
        autoplaySpeed: 2000,
        dots: true,
    });
});

$(document).ready(() => {
    $('#userReview .slick').slick({
        autoplay: true,
        autoplaySpeed: 8000,
        dots: true,
    });
});

$(window).scroll(function(){
    if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
       $('.box').show();
   } else {
       $('.box').hide();
   }
});
  

@media only screen and (max-width: 2000px) {
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(#FBDA61, #FF3CAC);
    overflow-x: hidden;
    color: cornsilk;
}
a {
    text-decoration: none;
}        
h1 {
    font-size: 26pt;
}
button {
    text-transform: uppercase;
    font-weight: bold;
}
html {
    font-family: "helvetica neue", sans-serif;
}

.box {
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: fixed
}
.box span {
    display: fixed;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    transition: all .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: 1;
    animation: animate 2s infinite;
}

.box span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -2;
}
.box span:before {
  content: '';
  color: cornsilk;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #d3d3d3;
  transition: all .3s;
  z-index: -1;
}
.box span:hover {
  color: #fff;
}
.box span:hover:before {
  width: 100%;
}
.box span:nth-child(1) {
    opacity: 0.3;
    z-index: 1;
}
.box span:nth-child(2) {
    opacity: 0.5;
    z-index: 1;
}
.logo h1 {
    margin: 0px
}
.logo img{
    text-align: left;
    float: left;
    padding: 15px 0 0 0;
}
.nav {
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 80px;
    line-height: 70px;
    background-color: black;
}

.menu {
    margin: 0 30px 0 0;
}
.menu a {
    clear: right;
    text-decoration: none;
    color: cornsilk;
    margin: 0 10px;
    line-height: 70px;
}

span {
    color: #54D17A;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    display: none;
    float: right;
    color: cornsilk;
}
#toggle {
    display: none;
}
#slideshow {
    position: relative;
    top: 0px;
    left: 0px;
}
#slideshow {
    div {
            width: 100%;
            height: 300px;
    img {
            width: 100%;
            height: auto;
        }
    }
}

Answer 1

Я думаю, что это полное использование для вас ... после прокрутки 100px значок стрелки исчезнет. В приведенном выше коде вы используете прокрутку на теле. Вы также можете добавить это в полный документ, изменив класс в функции прокрутки.

$(document).ready(() => {
    $('#slideshow .slick').slick({
        autoplay: true,
        autoplaySpeed: 2000,
        dots: true,
    });
});

$(document).ready(() => {
    $('#userReview .slick').slick({
        autoplay: true,
        autoplaySpeed: 8000,
        dots: true,
    });
});

// $(window).scroll(function(){
//     if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
//        $('.box').show();
//    } else {
//        $('.box').hide();
//    }
// });

// scroll selector
$('body').scroll(function() {

    // scroll disatance
    if($(this).scrollTop() >= 100){

        $('.box').hide();

    }
    else
    {
    
        $('.box').show();
    
    }    

});

@media only screen and (max-width: 2000px) {
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(#FBDA61, #FF3CAC);
    overflow-x: hidden;
    color: cornsilk;
}
a {
    text-decoration: none;
}        
h1 {
    font-size: 26pt;
}
button {
    text-transform: uppercase;
    font-weight: bold;
}
html {
    font-family: "helvetica neue", sans-serif;
}

.box {
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: fixed
}
.box span {
    display: fixed;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    transition: all .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: 1;
    animation: animate 2s infinite;
}

.box span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -2;
}
.box span:before {
  content: '';
  color: cornsilk;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #d3d3d3;
  transition: all .3s;
  z-index: -1;
}
.box span:hover {
  color: #fff;
}
.box span:hover:before {
  width: 100%;
}
.box span:nth-child(1) {
    opacity: 0.3;
    z-index: 1;
}
.box span:nth-child(2) {
    opacity: 0.5;
    z-index: 1;
}
.logo h1 {
    margin: 0px
}
.logo img{
    text-align: left;
    float: left;
    padding: 15px 0 0 0;
}
.nav {
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 80px;
    line-height: 70px;
    background-color: black;
}

.menu {
    margin: 0 30px 0 0;
}
.menu a {
    clear: right;
    text-decoration: none;
    color: cornsilk;
    margin: 0 10px;
    line-height: 70px;
}

span {
    color: #54D17A;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    display: none;
    float: right;
    color: cornsilk;
}
#toggle {
    display: none;
}
#slideshow {
    position: relative;
    top: 0px;
    left: 0px;
}
#slideshow {
    div {
            width: 100%;
            height: 300px;
    img {
            width: 100%;
            height: auto;
        }
    }
}