рони , не знал про это свойство.
Я так понимаю что для его работы надо чтобы блок-обертка был бОльшего размера?
Вот полный код:
<title>Test</title>
<head>
<style>
body {
width: 100%;
height: 200vh;
border: none;
background: #eff0f4;
}
.header-background {
padding-bottom: 20px;
padding-top: 25px;
background: url(https://i.ibb.co/qjXcxM3/3.jpg)no-repeat 95%;
position: relative;
overflow: hidden;
height: 750px;
background-size: contain;
}
.header-background .back-baground {
position: absolute;
top: 0%;
width: 57%;
left: 41%;
z-index: 99;
}
.header-background .mishen {
max-width: 1100px;
left: 44%;
top: -1%;
transition: all .5s ease-in-out;
/*position: -webkit-sticky;
position: sticky;*/
position:absolute;
z-index: 1;
}
.animate {
top:5%!important;
transition: all .5s ease-in-out!important;
}
</style>
</head>
<body>
<section class="header-background">
<div><img src="https://i.ibb.co/DDWyFhR/1.png" class="back-baground">
<div><img src="https://i.ibb.co/ZgZFC9V/2.png" class="mishen"></div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).scroll(function(){
if ($(this).scrollTop() > 50 ) {
$('.mishen').addClass('animate');
} else {
$('.mishen').removeClass('animate');
}
})
</script>
</body>
P.S. У меня там верстка едет еще на некоторых разрешениях, пытаюсь сделать адаптивно:
есть три слоя(нижний background и сверху две картинки). И картинка с классом mishen должна перемещаться между фоном и верхней картинкой.