Parallax Scrolling scrollTop

Question

Мне нужна небольшая помощь с прокруткой параллакса. Я пытаюсь, чтобы изображение прилипало к нижней части верхнего элемента div. Вот JQuery

function parallax() {
var scrollPosition = jQuery(window).scrollTop();
jQuery('#grid').css('top', (0 - (scrollPosition * .5))+'px' );
}

Прямо сейчас он прилипает к верхней части окна браузера при прокрутке. Я использовал большее число, такое как jQuery('#grid').css('top', (134 - (scrollPosition * .5))+'px' );

Это дает мне правильный интервал, когда страница загружается, но как только я прокручиваю, белый цвет может быть виден сверху div. Я не знаком с jQuery, поэтому любая помощь будет оценена.

Как я могу назначить верхнюю позицию div переменной scrollPosition,

/* ОБНОВЛЕНИЕ */ Извините, вот еще несколько подробностей по этому вопросу.

Вот jsfiddle

Посмотрите, как наклеить верхнюю часть окна? Я хотел бы, чтобы он придерживался нижней части заголовка.

Answer 1

Вы, вероятно, используете absolute позиционирование. Изменить это на fixed а также top всегда должен быть 0px, Это должно решить вашу проблему. Вот JSFiddle, показывающий это. Для работы не требуется JavaScript.

Answer 2

Я пишу новый ответ, потому что я не совсем понял вас раньше. Вам нужен фон, чтобы начать внизу заголовка, верно?

Я сделал это, забыв об абсолютном или фиксированном позиционировании и z-индексе. Вместо этого я создал div-обертку, чтобы обернуть все вокруг после #header div. В остальном все было в порядке, и никакой JavaScript не понадобился. Оболочка автоматически расширится до конца страницы с повторяющимся фоновым изображением.

Вот:

CSS:

#wrapper {
    padding:20px;
background: url('http://wpzombies.com/wp-content/uploads/2013/07/grid_bg.jpg') repeat top center;
}

удалите #grid div из CSS и HTML

HTML:

<div class="header">
    <h1>A header</h1>
</div>
<div id="wrapper">
    <div class="optin">
        <div class="wrap">
            <div id="home-para">
                <h2 class="home">Build, publish &amp; A/B test landing pages without I.T.</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.</p>
                <div id="opt-box">
                    <input type="email" /><a href="#" class="button orange">You can start here!</a>
                </div>
            </div>
        </div>
    </div>

    <div class="space">Lorem ipsum dolor sit amet...</div>
</div>

И удалите все js, относящиеся к функции прокрутки.

Вот это в JSFiddle.