как ограничить анимированный div разделом веб-страницы?

Привет, в настоящее время я работаю на веб-сайте parallax. Я хотел бы добавить изображение, которое перемещается вниз по мере прокрутки пользователем...но только в пределах раздела веб-сайта. Итак, 4 секции вниз..изображение есть...она движется, как пользователь прокручивает вниз...затем исчезает за 5-й секцией, и мы его больше не видим.

Я пытаюсь сделать аналогичный эффект для этого сайта: сайт

При прокрутке вниз...вы видите, как" о " перемещается между дивами. Я хочу этого добиться.

Когда я это делаю it...it появляется в верхней части первой секции и остается на экране до самого конца.

Вот пример JSfiddle. Он показывает только часть веб-сайта: fiddle

Я знаю, что это связано с позиционированием. Но я хочу, чтобы он оставался в DIV, а не располагался в пределах всей страницы.

// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
                               || window.mozRequestAnimationFrame
                               || window.webkitRequestAnimationFrame
                               || window.msRequestAnimationFrame
                               || function(f){setTimeout(f, 1000/60)}

var bubble1 = document.getElementById('bubbles1')
var bubble2 = document.getElementById('bubbles2')
var fish = document.getElementById('fish')

var scrollheight = 	document.body.scrollHeight // height of entire document
var windowheight = window.innerHeight // height of browser window


function parallaxbubbles(){
	var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically
	var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
	bubble1.style.top = scrolltop * .2 + 'px' // move bubble1 at 20% of scroll speed
	bubble2.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll speed
	fish.style.left = -100 + scrollamount + '%'

}

window.addEventListener('scroll', function(){ // on page scroll
	requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen repaint
}, false)

window.addEventListener('resize', function(){ // on window resize
	var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
	fish.style.left = -100 + scrollamount + '%'
}, false)

.cd-main-content {
  /* I need to assign a min-height to the main content so that the children can inherit it*/
  height: 60%;
  position: relative;
  /*z-index: 1;*/
}

.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  text-align: center;
  font-size: 30px;
  font-size: 1.875rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../images/content/grey.png");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../images/content/cd-background-2.jpg");
}

@media only screen and (min-width: 768px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;
    font-weight: 300;
  }
}

.cd-scrolling-bg {
  position: relative;
  min-height: 50%;
  padding: 4em 0;
  line-height: 1.6;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
/*.cd-scrolling-bg.cd-color-1 {
  background-color: #ffffff;
  color: #000000;
}*/
.cd-scrolling-bg.cd-color-2 {
  background-color: #1c1c1c;
  
  background: rgba(48,48,48,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(48,48,48,1)), color-stop(0%, rgba(56,56,56,1)), color-stop(46%, rgba(28,28,28,1)), color-stop(100%, rgba(10,10,10,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: radial-gradient(ellipse at center, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#0a0a0a', GradientType=1 );
  
  
  
 
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #00161B;
  color: #3d3536;
}
@media only screen and (min-width: 768px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 300;
  }
}





#bubbles1{
width: 100%;
height: 100%;
bottom: 0;
left: 0;
position: absolute;
z-index: -1;
background: url(http://www.i2clipart.com/cliparts/9/2/6/b/clipart-bubble-926b.png) 5% 80% no-repeat;
}

/*
#bubbles2{
background: url(bubbles3.png) 95% 90% no-repeat;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<main class="cd-main-content parallax">
	

		<div class="cd-scrolling-bg cd-color-2 parallax">
			<div class="cd-container">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem. Voluptates quibusdam odit odio incidunt consequatur, consectetur aspernatur optio vitae molestias, quas repellendus fugit ullam culpa, eligendi et dignissimos voluptatibus illum? Molestias aliquam nostrum quasi ipsa culpa, iusto explicabo ut error, consequuntur enim temporibus, adipisci tempora voluptate, id consequatur mollitia eveniet blanditiis. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-scrolling-bg cd-color-3">
             <div id="bubbles1"></div>
			<h2>Lorem ipsum dolor sit amet.</h2>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-3">
			
					 <div class="container">
                         <!--this is the bubble image-->
                        
					
        <div class="row-fluid">
            <div class="span3">
                <div class="text-widget widget">
                    <h4>About Me</h4>
                    <p>Lorem ipsum dolor nonus amet, consectetur ex adipisicing elit, sed do eiusmod incididunt ut labore et
                        dolore magna aliqua. Ut enim ad ex minim veniam, quis nostrud lorem exercitation ullamco laboris
                        nisi ut aliquip nesciunt aliqua.</p>
						
						
                </div>
            </div>
			
	
            <div class="span3">
               
            </div>
            <div class="span3">
                
            </div>
            <div class="span3">
               
            </div>
			
		
        </div>
		
		
    </div>
					
	
		</div>