<div data-imgfixed="#fixed1" class="panel panel-1">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p><strong>If you just want one fixed background image then <a href="https://codepen.io/paulobrien/pen/zFrsi" target="_blank">see this demo instead</a></strong>
      <p>
        <p><strong><a href=" http://www.pmob.co.uk/temp2/ios-fixed-multiple-backgrounds2.html" target="_blank">Demo</a> outside of codepen</strong>
          <p>
            <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed2" class="panel panel-2">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed3" class="panel panel-3">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed4" class="panel panel-4">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed5" class="panel panel-5">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed6" class="panel panel-6">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed7" class="panel panel-7">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed8" class="panel panel-8">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed9" class="panel panel-9">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed10" class="panel panel-10">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed11" class="panel panel-11">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed12" class="panel panel-12">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed13" class="panel panel-13">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>
<div data-imgfixed="#fixed14" class="panel panel-14">
  <div class="inner">
    <h1>Multiple Fixed backgrounds in ios</h1>
    <p>Scroll down the page to see the next background be revealed</p>
  </div>
</div>

<!-- list your fixed backgrounds here -->

<div class="fixedBG fixed1" id="fixed1"></div>
<div class="fixedBG fixed2" id="fixed2"></div>
<div class="fixedBG fixed3" id="fixed3"></div>
<div class="fixedBG fixed4" id="fixed4"></div>
<div class="fixedBG fixed5" id="fixed5"></div>
<div class="fixedBG fixed6" id="fixed6"></div>
<div class="fixedBG fixed7" id="fixed7"></div>
<div class="fixedBG fixed8" id="fixed8"></div>
<div class="fixedBG fixed9" id="fixed9"></div>
<div class="fixedBG fixed10" id="fixed10"></div>
<div class="fixedBG fixed11" id="fixed11"></div>
<div class="fixedBG fixed12" id="fixed12"></div>
<div class="fixedBG fixed13" id="fixed13"></div>
<div class="fixedBG fixed14" id="fixed14"></div>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background:#ccc;
	font-size:1.3rem;
}
h1 {
	color:#fff;
	text-align:center;
	background:rgba(0,0,0,0.7);
	margin:.5em 0;
	padding:.5em;
	font-size:2.2rem;
}

.inner{
  min-height:100vh;
	max-width:1280px;
	margin:auto;
	padding:20px;
	background:rgba(255,255,255, 0.5);
	position:relative;
  border-bottom:1px solid #000;
}
.fixed1,.panel-1 {
	background:url(https://picsum.photos/1200/800) no-repeat 50% 50%;
}
.fixed2,.panel-2 {
	background:url(https://picsum.photos/1500/900) no-repeat 50% 50%;
}
.fixed3,.panel-3 {
	background:url(https://picsum.photos/2000/1800) no-repeat 50% 50%;
}
.fixed4,.panel-4 {
	background:url(https://picsum.photos/1500/800) no-repeat 50% 50%;
}
.fixed5,.panel-5 {
	background:url(https://picsum.photos/1300/800) no-repeat 50% 50%;
}
.fixed6,.panel-6 {
	background:url(https://picsum.photos/1800/1100) no-repeat 50% 50%;
}
.fixed7,.panel-7 {
	background:url(https://picsum.photos/1200/1800) no-repeat 50% 50%;
}
.fixed8,.panel-8 {
	background:url(https://picsum.photos/1200/1500) no-repeat 50% 50%;
}
.fixed9,.panel-9 {
	background:url(https://picsum.photos/1200/800) no-repeat 50% 50%;
}
.fixed10,.panel-10 {
	background:url(https://picsum.photos/1200/1200) no-repeat 50% 50%;
}
.fixed11,.panel-11 {
	background:url(https://picsum.photos/800/800) no-repeat 50% 50%;
}
.fixed12,.panel-12 {
	background:url(https://picsum.photos/1000/900) no-repeat 50% 50%;
}
.fixed13,.panel-13 {
	background:url(https://picsum.photos/2000/1000) no-repeat 50% 50%;
}
.fixed14,.panel-14 {
	background:url(https://picsum.photos/2000/2000) no-repeat 50% 50%;
}
.panel{background-attachment:fixed;	background-size:cover;}
.touch .panel{background:none;}
/*
.fixedBG {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	background-size:cover;
	z-index:-1;
	opacity:0;
  display:none;
	transition:opacity .5s ease;
}
*/
/* IOS  bounce - on first scroll ios slides element a little and leaves a gap so I've oversized it a little to make it smoother*/
.fixedBG {
	position:fixed;
	top:auto;
	left:0;
	right:0;
	bottom:-10vh;
	width:100%;
	height:110vh;
	background-size:cover;
	z-index:-1;
	opacity:0;
	transition:opacity 1.5s ease;
	transform:translateY(-10vh);
}

.touch .fixedBG{display:block;}
.fixedON {
	opacity:1;
}
@media screen and (max-width:1320px){
	.panel{margin:0 20px;}		
}

@media screen and (max-width:680px){
	h1{font-size:1.8rem;padding:.3em}	
}
// detect touch 
	if (("ontouchstart" in document.documentElement)) {
  	document.documentElement.className += " touch";
	}


/*!
 * in-view 0.6.1 - Get notified when a DOM element enters or exits the viewport.
 * Copyright (c) 2016 Cam Wiegert <cam@camwiegert.com> - https://camwiegert.github.io/in-view
 * License: MIT
 */
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.inView=e():t.inView=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var i=n(2),o=r(i);t.exports=o["default"]},function(t,e){function n(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}t.exports=n},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var i=n(9),o=r(i),u=n(3),f=r(u),s=n(4),c=function(){if("undefined"!=typeof window){var t=100,e=["scroll","resize","load"],n={history:[]},r={offset:{},threshold:0,test:s.inViewport},i=(0,o["default"])(function(){n.history.forEach(function(t){n[t].check()})},t);e.forEach(function(t){return addEventListener(t,i)}),window.MutationObserver&&addEventListener("DOMContentLoaded",function(){new MutationObserver(i).observe(document.body,{attributes:!0,childList:!0,subtree:!0})});var u=function(t){if("string"==typeof t){var e=[].slice.call(document.querySelectorAll(t));return n.history.indexOf(t)>-1?n[t].elements=e:(n[t]=(0,f["default"])(e,r),n.history.push(t)),n[t]}};return u.offset=function(t){if(void 0===t)return r.offset;var e=function(t){return"number"==typeof t};return["top","right","bottom","left"].forEach(e(t)?function(e){return r.offset[e]=t}:function(n){return e(t[n])?r.offset[n]=t[n]:null}),r.offset},u.threshold=function(t){return"number"==typeof t&&t>=0&&t<=1?r.threshold=t:r.threshold},u.test=function(t){return"function"==typeof t?r.test=t:r.test},u.is=function(t){return r.test(t,r)},u.offset(0),u}};e["default"]=c()},function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=function(){function t(e,r){n(this,t),this.options=r,this.elements=e,this.current=[],this.handlers={enter:[],exit:[]},this.singles={enter:[],exit:[]}}return r(t,[{key:"check",value:function(){var t=this;return this.elements.forEach(function(e){var n=t.options.test(e,t.options),r=t.current.indexOf(e),i=r>-1,o=n&&!i,u=!n&&i;o&&(t.current.push(e),t.emit("enter",e)),u&&(t.current.splice(r,1),t.emit("exit",e))}),this}},{key:"on",value:function(t,e){return this.handlers[t].push(e),this}},{key:"once",value:function(t,e){return this.singles[t].unshift(e),this}},{key:"emit",value:function(t,e){for(;this.singles[t].length;)this.singles[t].pop()(e);for(var n=this.handlers[t].length;--n>-1;)this.handlers[t][n](e);return this}}]),t}();e["default"]=function(t,e){return new i(t,e)}},function(t,e){"use strict";function n(t,e){var n=t.getBoundingClientRect(),r=n.top,i=n.right,o=n.bottom,u=n.left,f=n.width,s=n.height,c={t:o,r:window.innerWidth-u,b:window.innerHeight-r,l:i},a={x:e.threshold*f,y:e.threshold*s};return c.t>e.offset.top+a.y&&c.r>e.offset.right+a.x&&c.b>e.offset.bottom+a.y&&c.l>e.offset.left+a.x}Object.defineProperty(e,"__esModule",{value:!0}),e.inViewport=n},function(t,e){(function(e){var n="object"==typeof e&&e&&e.Object===Object&&e;t.exports=n}).call(e,function(){return this}())},function(t,e,n){var r=n(5),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();t.exports=o},function(t,e,n){function r(t,e,n){function r(e){var n=x,r=m;return x=m=void 0,E=e,w=t.apply(r,n)}function a(t){return E=t,j=setTimeout(h,e),M?r(t):w}function l(t){var n=t-O,r=t-E,i=e-n;return _?c(i,g-r):i}function d(t){var n=t-O,r=t-E;return void 0===O||n>=e||n<0||_&&r>=g}function h(){var t=o();return d(t)?p(t):void(j=setTimeout(h,l(t)))}function p(t){return j=void 0,T&&x?r(t):(x=m=void 0,w)}function v(){void 0!==j&&clearTimeout(j),E=0,x=O=m=j=void 0}function y(){return void 0===j?w:p(o())}function b(){var t=o(),n=d(t);if(x=arguments,m=this,O=t,n){if(void 0===j)return a(O);if(_)return j=setTimeout(h,e),r(O)}return void 0===j&&(j=setTimeout(h,e)),w}var x,m,g,w,j,O,E=0,M=!1,_=!1,T=!0;if("function"!=typeof t)throw new TypeError(f);return e=u(e)||0,i(n)&&(M=!!n.leading,_="maxWait"in n,g=_?s(u(n.maxWait)||0,e):g,T="trailing"in n?!!n.trailing:T),b.cancel=v,b.flush=y,b}var i=n(1),o=n(8),u=n(10),f="Expected a function",s=Math.max,c=Math.min;t.exports=r},function(t,e,n){var r=n(6),i=function(){return r.Date.now()};t.exports=i},function(t,e,n){function r(t,e,n){var r=!0,f=!0;if("function"!=typeof t)throw new TypeError(u);return o(n)&&(r="leading"in n?!!n.leading:r,f="trailing"in n?!!n.trailing:f),i(t,e,{leading:r,maxWait:e,trailing:f})}var i=n(7),o=n(1),u="Expected a function";t.exports=r},function(t,e){function n(t){return t}t.exports=n}])});

inView('.touch .panel').on('enter', function (el) {
	var imgTarget =  document.querySelector(el.getAttribute('data-imgfixed'));
	imgTarget.classList.add('fixedON');	
}).on('exit', function (el) {
	var imgTarget =  document.querySelector(el.getAttribute('data-imgfixed'));
	imgTarget.classList.remove('fixedON');	
});
//inView.offset(100);
inView.threshold(0);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.