рони,
У меня тут в принципе много всего, но по сути макет в структуре как и у Вас, просто идут блоки-секции, некоторые из них, начиная с header имеют фоновый картинки, проблема именно с блоком header, есть условие, что его фоновая картинки должна быть изначально в положении 50% 50%, и отсюда считать смещение.
Я уже сделала такой вариант, паралакс столько для header в скрипте, а для остальных блоков просто с помощью background-attachment: fixed, но все равно как-то в header получается еле заметный паралакс)) Пробовала менять значения, но пока не удалось подобрать нужное))
Если отбросить лишнее в моем макете, что не касается данного вопроса, то получается как-то так.
Правда, простите, не знаю как сделать, как у Вас, чтобы рабочий пример размещать, чтобы его можно было запустить, плюс фоток в блоках нет, чтобы тоже просмотреть)
<!DOCTYPE HTML>
<html>
<head>
<title>Template</title>
<meta charset="utf-8">
<style type="text/css">
html, body{
height: 100%;
margin: 0px;
padding: 0px;
}
.header{
position: relative;
height: 620px;
background-image: url("../images/header.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.section-form{
background: url("../images/section-form-bg.jpg") 50% 50% no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(window).scroll(function(){
var windowScrollTop = $(this).scrollTop(),
scrollSection = $('.paralax');
if(windowScrollTop>scrollSection .position().top){
var scrollValue = 50 - (windowScrollTop*7-scrollSection .position().top)/100;
scrollSection .css({'background-position': '50% '+scrollValue+'%'});
}else{
scrollSection .css({'background-position': '50% 50%'});
}
if(windowScrollTop>scrollSection .next().position().top){
scrollSection .css({'background-position': '50% 50%'});
}
});
});
</script>
</head>
<body>
<header class="header paralax"></div>
<div class="section-promo-block1"></div>
<div class="section-promo-block2"></div>
<div class="section-form"></div>
<div class="section-promo-block3"></div>
<footer></footer>
</body>
</html>
Спасибо за помощь!