Pause section and scroll inside a div

Question

I'm working on a client site and i'm currently having an issue firguring out how to make something work. the goal is to pause at the section and continue to scroll inside the iphone then continue to scroll once the iphone has finished scrolling. I have attempted to use position fixed on the section but obviously the body continues to scroll so I'm not sure if this is the right solution. I was wondering if this is something Skrollr could assist with as well. Does anyone have any ideas?

I've added a fiddle of the layout: https://jsfiddle.net/9Lm6he4j/1/

Psuedo HTML:

<section>
    <div class="iphone_wrap">
        <div class="iphone_inner">
            <!--Message content-->
        </div>
    </div>
</section>

CSS:

section {
   position:relative;
   min-height:500px;
   width:100%;
}

.iphone_wrap {
    width:400px;
    height:650px;
    position:absolute;
    left:20%;
    top:-200px;
    background:url('iphone.jpg');
}

.iphone_inner {
    position:relative;
    margin:0 auto;
    overflow:scroll;
}

Answer 1

one way you can do this is

• use javascript/jquery and set position fixed of the "blue color section" and "iphone wrapper"

  content which run inside the phone implement as a part of the underlying body of the page

  so the blue section + iphone wrapper will work as a overlay while the content of the iphone scroll below this section

  and using js/jquery you can reset the position fixed to relative after the end of that content.

Answer 2

You can try out ScrollMagic that might help you. It has really detailed doc's and well support by author on https://github.com/janpaepke/ScrollMagic