Как центрировать выравнивание/центрирование прокрутки содержимого параллакса?

Question

Я использую простой эффект прокрутки параллакса, однако я столкнулся с двумя проблемами.

1. У меня не может быть #background оставаться в центре, когда вы увеличиваете и уменьшаете масштаб. Если я изменил позицию на относительную, она будет оставаться неподвижной, чтобы создать эффект параллакса.

2. контейнер #nav сидит над фоном, и если я полностью удаляю контейнер #nav, фон падает в нижней части страницы. Я хотел бы планку #nav сидеть на верхней части фона, в конечном счете, создавая ту же самую идею в этом сайте: http://www.falve.co.nz/collection/

Ниже мой код

<div id="page-wrap"> 
<div id="background"><img src="../images/COVER PHOTO.JPG" width="97%" height="97%"></div> 
<nav id="nav">Nav</nav> 
<div id="main">"MAIN BODY</div> 

CSS

#page-wrap{ 
position: relative; 
min-width: 1366px; 
max-width: 2048px; 
margin: 0px auto; 
width: 100%; 
} 


#nav { 
margin: 0; 
height: 0px; 
background: #fff; 
position: relative; 
} 

#main { 
margin: 1000px 0 0 0; 
height: 1200px; 
background: #fff; 
position: relative; 
} 

#background { 
position: fixed; 
margin: auto; 
left: 50px; 
width: 98%; 
height: 97%; 
} 

JS

<script src="../js/jquery.min.js"></script> 
<script src="../js/jquery.stellar.min.js"></script> 

<script>$(function() { 
$(window).on('scroll', function() { 
    $('#background').css('margin-top', $(window).scrollTop() * -.3); 
}); 
}); 
</script> 

Answer 1

Вариант № 1 (относится к вашему коду):

Есть недостатки. Например, закрываем div-страницы.

1. В принципе, вы можете установить фон для своего заголовка и поиграть с ним.

2. С небольшими условиями вы можете сделать то же трюк с нав

   if ($(this).scrollTop() > 200) { 
       $("#nav").fadeOut(); 
   } else { 
       $("#nav").stop().fadeIn(); 
   } 
   

See your Example

Вариант № 2 (рекомендуется):

Я бы рекомендовал использовать special plugin (skrollr) для связанного с параллаксом материала. Вы можете сделать намного больше с большим количеством опций с индивидуальной поддержкой. Существует также раздел учебника.

Надеюсь, я помог вам с моим первым ответом здесь.