Javascript滚动视差定位

我目前正在做一个javascript视差页面。我设法设置了背景图片和另外2张图片（＃content，＃content2）。

当我一直滚动到我的内容下方，然后再滚动到我的content2时，我希望网页在此结束。但是我可以无限向下滚动。

任何人都可以看看我的代码并告诉我需要添加或更改的内容，以便我的网页在content2之后结束并停止滚动。

请注意，我的#image是我的主要背景，而content和content2是位于背景之上的单独图像，但是我希望页面和滚动在content2处停止。

代码：

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    #image {
        position: relative;
        z-index: -1
    }
    #content {
        height:690px;
        width: 100%;
        margin-top:-10px;
        background:url(http:/chicago_bulls_wallpaper_backgrounds.jpg);
        position: relative;
        z-index: 1; 
        background-repeat:   no-repeat;
        background-position: center center;
    }

    #content2 {
        top:710px;
        height:570px;
        width: 100%;
        margin-top:-10px;
        background:url(All.jpg);
        position: relative;
        z-index: 1; 
        background-repeat:   no-repeat;
      background-position: center center
         }

      </style>
    <script type="text/javascript">
    var ypos, image;
    function parallex() {
        ypos = window.pageYOffset;
        image = document.getElementById('image');
        image.style.top = ypos * 1 + 'px';
    }
    window.addEventListener('scroll', parallex);
    </script>
     <img id="image" src="black-glass.png" height="710px" width="100%" />
   <div id="content"></div>
    <div id="content2"></div>