dianaow/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Scrollama v2 depreciates .onContainerEnter and .onContainerExit in favor of CSS property position: sticky. In this block, i explore the use of position: sticky instead. Comparision with enter-view.js here
Russell Goldenberg's code example for reference: repo
Built with blockbuilder.org

  
## index.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <title>scrollytelling</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
				<script src="stickyfill.min.js"></script>
				<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
				<script src="https://unpkg.com/scrollama"></script>
        <link rel="stylesheet" href="scrollytelly.css">
        <style>
        	#scrolly-side .scrolly {
        		position: relative;
						display: flex;
						max-width: 60rem;
						margin: 3rem auto;
						background-color: cornsilk;
						padding: 1rem;
					}

					article {
						position: relative;
						padding-right: 1rem;
						max-width: 30rem;
					}

					figure.sticky {
						position: sticky;
						width: 100%;
						height: 50vh;
						background: silver;
						margin: 0;
						top: 25vh;
						left: 0;
						-webkit-transform: translate3d(0, 0, 0);
						-moz-transform: translate3d(0, 0, 0);
						transform: translate3d(0, 0, 0);
					}
        </style>
    </head>
    <body>

		 	<section id='scrolly-side'>
				 <div class='scrolly'>

					<article>
						<div class='step' data-width='10%' data-index='0'><p>Bar is 10%</p></div>
						<div class='step' data-width='90%' data-index='1'><p>Bar is 90%</p></div>
						<div class='step' data-width='50%' data-index='2'><p>Bar is 50%</p></div>
					</article>

						<figure class='sticky'>
							<div class='bar-outer'>
								<div class='bar-inner'></div>
							</div>
						</figure>

				</div>
			</section>

	    <!-- Scripts -->
	    <script>

				const container = d3.select('#scrolly-side');
				var figure = container.select('figure');
				var article = container.select('article');
				const stepSel = article.selectAll('.step');

	    		// instantiate the scrollama
				const scroller = scrollama();

				// generic window resize listener event
				function handleResize() {
					// 1. update height of step elements
					var stepH = Math.floor(window.innerHeight * 0.75);
					stepSel.style('height', stepH + 'px');
					var figureHeight = window.innerHeight / 2
					var figureMarginTop = (window.innerHeight - figureHeight) / 2
					figure
						.style('height', figureHeight + 'px')
						.style('top', figureMarginTop + 'px');
					// 3. tell scrollama to update new element dimensions
					scroller.resize();
				}

				// scrollama event handlers
				function handleStepEnter(response) {
					console.log(response)
					updateChart(response.index)
				}

				function updateChart(index) {
					const sel = container.select(`[data-index='${index}']`);
					const width = sel.attr('data-width');
					stepSel.classed('is-active', (d, i) => i === index);
					container.select('.bar-inner').style('width', width);
				}

				function init() {
					Stickyfill.add(d3.select('.sticky').node());

					// 1. force a resize on load to ensure proper dimensions are sent to scrollama
					handleResize();

					// 2. setup the scroller passing options
					// this will also initialize trigger observations
					// 3. bind scrollama event handlers (this can be chained like below)
					scroller.setup({
						step: '#scrolly-side article .step',
						offset: 0.5,
						debug: false
					})
					.onStepEnter(handleStepEnter)

					// setup resize event
					window.addEventListener('resize', handleResize);

				}

				init()
    	</script>
    </body>
</html>

## scrollytelly.css
#scrolly-side .scrolly {
	display: flex;
	max-width: 60rem;
	margin: 3rem auto;
	background-color: cornsilk;
	padding: 1rem;
}

* {
 	flex: 1;
 }

article {
	padding-right: 1rem;
	max-width: 30rem;
}

.step {
	min-height: 67vh;
	margin-bottom: 1rem;
	background-color: white;
	transition: background-color 250ms ease-in-out;
}

.step:last-of-type {
	margin-bottom: 0;
}
.step.is-active {
	background-color: gray;
}
}

article > p {
	margin: 0;
	padding: 1rem;
	text-align: center;
	font-weight: 400;
	color: black;
}

figure.sticky {
	position: sticky;
	width: 100%;
	height: 50vh;
	background: silver;
	margin: 0;
	top: 25vh;
	left: 0;
}

.bar-outer {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	width: 90%;
	height: 4rem;
	background-color: green;
}

.bar-inner {
	width: 10%;
	height: 100%;
	transition: width 1s ease-in-out;
	background-color: red;
}

## stickyfill.min.js
/*!
  * Stickyfill – `position: sticky` polyfill
  * v. 2.1.0 | https://github.com/wilddeer/stickyfill
  * MIT License
  */
!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]||d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=!1,j="undefined"!=typeof a;j&&a.getComputedStyle?!function(){var a=b.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(b){try{a.style.position=b+"sticky"}catch(a){}return""!=a.style.position})&&(i=!0)}():i=!0;var k=!1,l="undefined"!=typeof ShadowRoot,m={top:null,left:null},n=[],o=function(){function g(a){if(c(this,g),!(a instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(n.some(function(b){return b._node===a}))throw new Error("Stickyfill is already applied to this node");this._node=a,this._stickyMode=null,this._active=!1,n.push(this),this.refresh()}return h(g,[{key:"refresh",value:function(){if(!i&&!this._removed){this._active&&this._deactivate();var c=this._node,g=getComputedStyle(c),h={position:g.position,top:g.top,display:g.display,marginTop:g.marginTop,marginBottom:g.marginBottom,marginLeft:g.marginLeft,marginRight:g.marginRight,cssFloat:g.cssFloat};if(!isNaN(parseFloat(h.top))&&"table-cell"!=h.display&&"none"!=h.display){this._active=!0;var j=c.style.position;"sticky"!=g.position&&"-webkit-sticky"!=g.position||(c.style.position="static");var k=c.parentNode,m=l&&k instanceof ShadowRoot?k.host:k,n=c.getBoundingClientRect(),o=m.getBoundingClientRect(),p=getComputedStyle(m);this._parent={node:m,styles:{position:m.style.position},offsetHeight:m.offsetHeight},this._offsetToWindow={left:n.left,right:b.documentElement.clientWidth-n.right},this._offsetToParent={top:n.top-o.top-e(p.borderTopWidth),left:n.left-o.left-e(p.borderLeftWidth),right:-n.right+o.right-e(p.borderRightWidth)},this._styles={position:j,top:c.style.top,bottom:c.style.bottom,left:c.style.left,right:c.style.right,width:c.style.width,marginTop:c.style.marginTop,marginLeft:c.style.marginLeft,marginRight:c.style.marginRight};var q=e(h.top);this._limits={start:n.top+a.pageYOffset-q,end:o.top+a.pageYOffset+m.offsetHeight-e(p.borderBottomWidth)-c.offsetHeight-q-e(h.marginBottom)};var r=p.position;"absolute"!=r&&"relative"!=r&&(m.style.position="relative"),this._recalcPosition();var s=this._clone={};s.node=b.createElement("div"),d(s.node.style,{width:n.right-n.left+"px",height:n.bottom-n.top+"px",marginTop:h.marginTop,marginBottom:h.marginBottom,marginLeft:h.marginLeft,marginRight:h.marginRight,cssFloat:h.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),k.insertBefore(s.node,c),s.docOffsetTop=f(s.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var a=m.top<=this._limits.start?"start":m.top>=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})||d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}for(var b=0;b<n.length;b++)if(n[b]._node===a)return n[b];return new o(a)},add:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length){for(var b=[],c=function(c){var d=a[c];return d instanceof HTMLElement?n.some(function(a){if(a._node===d)return b.push(a),!0})?"continue":void b.push(new o(d)):(b.push(void 0),"continue")},d=0;d<a.length;d++){c(d)}return b}},refreshAll:function(){n.forEach(function(a){return a.refresh()})},removeOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}n.some(function(b){if(b._node===a)return b.remove(),!0})},remove:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length)for(var b=function(b){var c=a[b];n.some(function(a){if(a._node===c)return a.remove(),!0})},c=0;c<a.length;c++)b(c)},removeAll:function(){for(;n.length;)n[0].remove()}};i||g(),"undefined"!=typeof module&&module.exports?module.exports=p:j&&(a.Stickyfill=p)}(window,document);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<title>scrollytelling</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="stickyfill.min.js"></script>
	<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
	<script src="https://unpkg.com/scrollama"></script>
	<link rel="stylesheet" href="scrollytelly.css">
	<style>
	#scrolly-side .scrolly {
	position: relative;
	display: flex;
	max-width: 60rem;
	margin: 3rem auto;
	background-color: cornsilk;
	padding: 1rem;
	}

	article {
	position: relative;
	padding-right: 1rem;
	max-width: 30rem;
	}

	figure.sticky {
	position: sticky;
	width: 100%;
	height: 50vh;
	background: silver;
	margin: 0;
	top: 25vh;
	left: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
	</style>
	</head>
	<body>

	<section id='scrolly-side'>
	<div class='scrolly'>

	<article>
	<div class='step' data-width='10%' data-index='0'><p>Bar is 10%</p></div>
	<div class='step' data-width='90%' data-index='1'><p>Bar is 90%</p></div>
	<div class='step' data-width='50%' data-index='2'><p>Bar is 50%</p></div>
	</article>

	<figure class='sticky'>
	<div class='bar-outer'>
	<div class='bar-inner'></div>
	</div>
	</figure>

	</div>
	</section>

	<!-- Scripts -->
	<script>

	const container = d3.select('#scrolly-side');
	var figure = container.select('figure');
	var article = container.select('article');
	const stepSel = article.selectAll('.step');

	// instantiate the scrollama
	const scroller = scrollama();

	// generic window resize listener event
	function handleResize() {
	// 1. update height of step elements
	var stepH = Math.floor(window.innerHeight * 0.75);
	stepSel.style('height', stepH + 'px');
	var figureHeight = window.innerHeight / 2
	var figureMarginTop = (window.innerHeight - figureHeight) / 2
	figure
	.style('height', figureHeight + 'px')
	.style('top', figureMarginTop + 'px');
	// 3. tell scrollama to update new element dimensions
	scroller.resize();
	}

	// scrollama event handlers
	function handleStepEnter(response) {
	console.log(response)
	updateChart(response.index)
	}

	function updateChart(index) {
	const sel = container.select(`[data-index='${index}']`);
	const width = sel.attr('data-width');
	stepSel.classed('is-active', (d, i) => i === index);
	container.select('.bar-inner').style('width', width);
	}

	function init() {
	Stickyfill.add(d3.select('.sticky').node());

	// 1. force a resize on load to ensure proper dimensions are sent to scrollama
	handleResize();

	// 2. setup the scroller passing options
	// this will also initialize trigger observations
	// 3. bind scrollama event handlers (this can be chained like below)
	scroller.setup({
	step: '#scrolly-side article .step',
	offset: 0.5,
	debug: false
	})
	.onStepEnter(handleStepEnter)

	// setup resize event
	window.addEventListener('resize', handleResize);

	}

	init()
	</script>
	</body>
	</html>
	/*!
	* Stickyfill – `position: sticky` polyfill
	* v. 2.1.0 \| https://github.com/wilddeer/stickyfill
	* MIT License
	*/
	!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)\|\|0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]\|\|d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable\|\|!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=!1,j="undefined"!=typeof a;j&&a.getComputedStyle?!function(){var a=b.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(b){try{a.style.position=b+"sticky"}catch(a){}return""!=a.style.position})&&(i=!0)}():i=!0;var k=!1,l="undefined"!=typeof ShadowRoot,m={top:null,left:null},n=[],o=function(){function g(a){if(c(this,g),!(a instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(n.some(function(b){return b._node===a}))throw new Error("Stickyfill is already applied to this node");this._node=a,this._stickyMode=null,this._active=!1,n.push(this),this.refresh()}return h(g,[{key:"refresh",value:function(){if(!i&&!this._removed){this._active&&this._deactivate();var c=this._node,g=getComputedStyle(c),h={position:g.position,top:g.top,display:g.display,marginTop:g.marginTop,marginBottom:g.marginBottom,marginLeft:g.marginLeft,marginRight:g.marginRight,cssFloat:g.cssFloat};if(!isNaN(parseFloat(h.top))&&"table-cell"!=h.display&&"none"!=h.display){this._active=!0;var j=c.style.position;"sticky"!=g.position&&"-webkit-sticky"!=g.position\|\|(c.style.position="static");var k=c.parentNode,m=l&&k instanceof ShadowRoot?k.host:k,n=c.getBoundingClientRect(),o=m.getBoundingClientRect(),p=getComputedStyle(m);this._parent={node:m,styles:{position:m.style.position},offsetHeight:m.offsetHeight},this._offsetToWindow={left:n.left,right:b.documentElement.clientWidth-n.right},this._offsetToParent={top:n.top-o.top-e(p.borderTopWidth),left:n.left-o.left-e(p.borderLeftWidth),right:-n.right+o.right-e(p.borderRightWidth)},this._styles={position:j,top:c.style.top,bottom:c.style.bottom,left:c.style.left,right:c.style.right,width:c.style.width,marginTop:c.style.marginTop,marginLeft:c.style.marginLeft,marginRight:c.style.marginRight};var q=e(h.top);this._limits={start:n.top+a.pageYOffset-q,end:o.top+a.pageYOffset+m.offsetHeight-e(p.borderBottomWidth)-c.offsetHeight-q-e(h.marginBottom)};var r=p.position;"absolute"!=r&&"relative"!=r&&(m.style.position="relative"),this._recalcPosition();var s=this._clone={};s.node=b.createElement("div"),d(s.node.style,{width:n.right-n.left+"px",height:n.bottom-n.top+"px",marginTop:h.marginTop,marginBottom:h.marginBottom,marginLeft:h.marginLeft,marginRight:h.marginRight,cssFloat:h.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),k.insertBefore(s.node,c),s.docOffsetTop=f(s.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var a=m.top<=this._limits.start?"start":m.top>=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1\|\|Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})\|\|d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length\|\|!a[0])return;a=a[0]}for(var b=0;b<n.length;b++)if(n[b]._node===a)return n[b];return new o(a)},add:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length){for(var b=[],c=function(c){var d=a[c];return d instanceof HTMLElement?n.some(function(a){if(a._node===d)return b.push(a),!0})?"continue":void b.push(new o(d)):(b.push(void 0),"continue")},d=0;d<a.length;d++){c(d)}return b}},refreshAll:function(){n.forEach(function(a){return a.refresh()})},removeOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length\|\|!a[0])return;a=a[0]}n.some(function(b){if(b._node===a)return b.remove(),!0})},remove:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length)for(var b=function(b){var c=a[b];n.some(function(a){if(a._node===c)return a.remove(),!0})},c=0;c<a.length;c++)b(c)},removeAll:function(){for(;n.length;)n[0].remove()}};i\|\|g(),"undefined"!=typeof module&&module.exports?module.exports=p:j&&(a.Stickyfill=p)}(window,document);