使用skrollr在固定图像背景的同时“冻结”滚动

Question

我有这个小提琴http://jsfiddle.net/azzy588u/12/#我需要您在第二个合成器中看到的滚动“暂停”，但我想具有视差效果，即位置固定且图像滚动固定在此网站上： https : //ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/ ，所以我希望对div产生这种效果。

我正在使用skrollr.js

<div id="slides-container">
  <div id="slides" data-0="transform:translate(0%,0%);" data-150p="transform:translate(0%,-50%);" data-200p="" data-350p="transform:translate(0%,-100%);" data-450p="" data-550p="transform:translate(0%,-150%);">
    <div id="slide-1" class="slide">
      <div class="caption" data-40p="opacity: 1; transform:translate(0px,0px);" data-70p="opacity: 0; transform:translate(0px,-100%);" data-anchor-target="#helper">
        <h1>Image 1 Title</h1>
        <p>Image description goes here.</p>
      </div>
    </div>
    <div id="slide-2" class="slide">
      <div class="caption" data-130p="opacity: 0; transform:translate(0px,-200%);" data-180p="opacity: 1; transform:translate(0px,0px);" data-250p="" data-280p="opacity: 0; transform:translate(-100px,0px);" data-anchor-target="#helper">
        <h1>Image 2 Title</h1>
        <p>Image description goes here.</p>
      </div>
    </div>
    <div id="slide-3" class="slide">
      <div class="caption" data-250p="opacity: 0; transform:translate(300px,0px);" data-300p="opacity: 1; transform:translate(0px,0px);" data-anchor-target="#helper">
        <h1>Image 3 Title</h1>
        <p>Image description goes here.</p>
      </div>
    </div>
    <div id="slide-4" class="slide">
      <div class="caption" data-430p="opacity: 0;" data-450p="opacity: 1;" data-anchor-target="#helper">
        <h1>Image 4 Title</h1>
        <p>Image description goes here.</p>
      </div>
    </div>
  </div>
</div>

<div id="helper">
  <div class="marker red"></div>
  <div class="marker green"></div>
  <div class="marker blue"></div>
  <div class="marker yellow"></div>
</div>

我的CSS是：

#slides-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* double the height/width of a viewport */
#slides {
    width: 200%;
    height: 200%;
    position: fixed;
    top: 0;
    left: 0;
}
.slide {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#slide-1 {

    background: url('../img/synth-bg-1.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;

}
#slide-2 {

    background: url('../img/synth-bg-2.png') no-repeat center center;
    background-size: cover;
        background-attachment: fixed;

    -webkit-transform: translate(0,100%);
    -ms-transform: translate(0,100%);
    transform: translate(0,100%);
}
#slide-3 {

    background: url('../img/synth-bg-3.png') no-repeat center center;
    background-size: cover;
        background-attachment: fixed;

    -webkit-transform: translate(0%,200%);
    -ms-transform: translate(0%,200%);
    transform: translate(00%,200%);
}
#slide-3 .caption {
    left: 5%;
    right: auto;
    color: #47373f;
}
#slide-4 {

    background: url('../img/synth-bg-4.png') no-repeat center center;
    background-size: cover;
        background-attachment: fixed;

    -webkit-transform: translate(0%,300%);
    -ms-transform: translate(0%,300%);
    transform: translate(0%,300%);
}
#slide-4 .caption {
    right: auto;
    left: 5%;
    top: 5%;
    bottom: auto;
    color: #47373f;
}

Answer 1

您必须了解有关skrollr插件的更多信息。 这个插件是基于模式的。 您可以检查元素（数字模式）何时停止。

更新

请尝试： http : //jsfiddle.net/jteh4u6j/3/或下面的代码段。

 var s = skrollr.init(); 

  ========================================================================== Chrome Frame prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ html, body { width:100%; height:100%; } .caption { position: absolute; bottom: 5%; right: 5%; text-align: right; color: #fff; } p, h1 { margin: 0; } h1 { margin-bottom: 0.2em; } p { line-height: 1.333em; } /* full width/height container */ #slides-container { width: 100%; height: 100%; overflow: hidden; } /* double the height/width of a viewport */ #slides { width: 200%; height: 200%; position: fixed; bottom: 0; left: 0; } .slide { position:fixed; bottom:0; left:0; width:100%; height:100%; } #slide-1 { background: url('http://i.imgur.com/7aWoXGR.png') no-repeat center center; background-size: cover; background-attachment: fixed; } #slide-2 { background: url('http://i.imgur.com/GkPXSPP.png') no-repeat center center; background-size: cover; background-attachment: fixed; height:0%; } #slide-3 { background: url('http://i.imgur.com/EQabH21.png') no-repeat center center; background-size: cover; background-attachment: fixed; height:0%; } #slide-3 .caption { left: 5%; right: auto; color: #47373f; } #slide-4 { height:0%; background: url('http://i.imgur.com/GWz6iqB.png') no-repeat center center; background-size: cover; background-attachment: fixed; } #slide-4 .caption { right: auto; left: 5%; top: 5%; bottom: auto; color: #47373f; } #helper { position:absolute; left:0; top: 0; height:600%; width: 0; } .marker { height: 25%; width: 100%; } .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ /* =Caption style */ .caption { text-align: right; } #slide-3 .caption, #slide-4 .caption { text-align: left; } } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* Ok so you have made it this far, that means you are very keen to on my code. Anyway I don't really mind it. This is a great way to learn so you actually doing the right thing:) Follow me @ihatetomatoes */ 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.27/skrollr.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> <![endif]--> <!-- Demo content --> <div id="page-content"> <div id="slides-container"> <div id="slides" data-0="transform:translate(0%,0%);" data-1500="transform:translate(0%,0%);"> <div id="slide-1" class="slide" data-0="transform:translate(0%,0%);" data-1500="transform:translate(0%,0%);"> </div> <div id="slide-2" class="slide" data-0="height: 0%" data-500="height: 100%"> </div> <div id="slide-3" class="slide" data-500="height: 0%" data-900="height: 100%"> </div> <div id="slide-4" class="slide" data-900="height: 0%" data-1200="height: 100%"> </div> </div> </div> <div id="helper"> <div class="marker red"></div> <div class="marker green"></div> <div class="marker blue"></div> <div class="marker yellow"></div> </div> </div> <!-- /Demo content --> <!-- Include Skrollr.js --> </body>