Как я могу заставить этот эффект параллакса работать на мобильных браузерах? ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект параллакса на основе этого кода: https://codepen.io/chaobu/pen/qsyhf

Однако на мобильных устройствах это не работает. Как я могу заставить эффект параллакса работать на мобильных браузерах? Первоначально я подумал изменить событие JavaScript Click, чтобы коснуться ..., однако это не сработало. Я также пытался создать медиа -запрос для фоновых изображений и позиции: липкий; их, и это тоже не сработало. < /p>

html: < /p>



FULL PROJECT LIST





CONTENT LINK





CONTENT LINK





CONTENT LINK





CONTENT LINK




< /code>

css: < /p>

.wrapper {
position: relative;
box-shadow: 0 0 1em #333333;
}
.wrapper section {
position: relative;
background: #00477C;
}
.wrapper section article {
width: 50%;
margin: 0 auto;
padding: 2em 0;
}
.wrapper section article p {
margin-bottom: 1em;
}
.wrapper section article p:last-of-type {
margin-bottom: 0;
}
.wrapper section:after {
content: "";
display: block;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
}

.img-src {
position: fixed;
background-position: center;
-webkit-background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.wrapper section:nth-child(1):after {
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(2):after {
background-image: url("../img/test2.jpg");
}
.wrapper section:nth-child(3):after {
background-image: url("../img/test3.jpg");
}
.wrapper section:nth-child(4):after {
background-image: url("../img/test4.jpg");
}
.wrapper section:nth-child(5):after {
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(6):after {
background-image: url("../img/test2.jpg");
}

@media only screen and (max-width: 600px) {
.wrapper section:nth-child(1):after {
position: -webkit-sticky;
top:65px;
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(2):after {
position: -webkit-sticky;
background-image: url("../img/test2.jpg");
}
.wrapper section:nth-child(3):after {
position: -webkit-sticky;
background-image: url("../img/test3.jpg");
}
.wrapper section:nth-child(4):after {
position: -webkit-sticky;
background-image: url("../img/test4.jpg");
}
.wrapper section:nth-child(5):after {
position: -webkit-sticky;
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(6):after {
position: -webkit-sticky;
background-image: url("../img/test2.jpg");
}
}

@media only screen and (max-width: 600px) {
.wrapper section article {
width: 80%;
}
.wrapper section:after {
height: 100vh;
}
}
< /code>

Я ожидал, что параллакс будет работать над мобильным, однако это не так. Может ли кто -нибудь помочь с этим? Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/573 ... e-browsers