Pause section and scroll inside a div

问题

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;
}

回答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.

回答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

来源：https://stackoverflow.com/questions/30939429/pause-section-and-scroll-inside-a-div

标签

javascript

jquery

html

css

parallax