Показать сообщение отдельно
  #3 (permalink)  
Старый 25.12.2019, 12:29
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 44

рони , не знал про это свойство.
Я так понимаю что для его работы надо чтобы блок-обертка был бОльшего размера?
Вот полный код:
<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 должна перемещаться между фоном и верхней картинкой.

Последний раз редактировалось Timurkin, 25.12.2019 в 12:35.
Ответить с цитированием