jhines2k7/waypoints-sticky-headers-with-handlebars.html

## waypoints-sticky-headers-with-handlebars.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Waypoints Elements Different Heights</title>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        #container {
            width: 1000px;
            height: 80%;
            border: solid 2px black;
            margin: 60px auto 0 auto;
            overflow: scroll;
        }

        .tail-header {
            height: 40px;
            background-color: red;
            border-bottom: solid 2px black;
        }

        .stuck {
            position: fixed;
            top: 62px;
            width: 985px;
        }

        .taller {
            height: 80px
        }
    </style>
</head>
<body ng-app="main">
<div id="container"></div>

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/waypoints/lib/jquery.waypoints.js"></script>
<script src="node_modules/waypoints/lib/shortcuts/sticky.js"></script>
<script src="node_modules/handlebars/dist/handlebars.js"></script>

<script id="tail-list" type="text/x-handlebars-template">
    {{#each tails}}
    <div class="tail">
        <div class="tail-header {{#if taller}}taller{{/if}}"
             {{#if @first}}id="main-tail-header{{/if}}">Tail Header {{ number }}</div>
        <div class="tail-container">
            <h1>Tail Number {{ number }}</h1>

            <p>Eveniet quaerat, vitae. Aspernatur error exercitationem id molestias unde! Dolore dolores ea
                necessitatibus optio quas quia quos repudiandae veritatis? Asperiores aspernatur debitis error fugit
                molestias nobis officiis, quibusdam quidem veritatis?</p>

            <p>Architecto culpa quae repellat sapiente suscipit, unde veritatis. Accusantium aliquid beatae, ea earum
                eveniet ipsam ipsum molestias, nam nisi numquam omnis possimus, quaerat ratione repudiandae sapiente
                sequi similique tempore voluptate!</p>

            <h1>Tail Number {{ number }}</h1>
        </div>
    </div>
    {{/each}}
</script>

<script>
    var context = {
        tails: []
    };

    for(var i = 1; i < 501; i++){
        context.tails.push(
            {
                number: i,
                taller: false
            }
        );
    }

    context.tails[2].taller = true;
    context.tails[6].taller = true;
    context.tails[12].taller = true;
    context.tails[17].taller = true;
    context.tails[22].taller = true;
    context.tails[38].taller = true;

    var templateScript = $('#tail-list').html();
    var template = Handlebars.compile(templateScript);
    $('#container').html(template(context));

    var waypoints = {}, tokens, waypointKey;

    var mainTailHeader = $('#main-tail-header');

    var sticky = new Waypoint.Sticky({
        element: mainTailHeader,
        context: $('#container')
    });

    var tailHeaders = $('.tail-header');

    $('.tail-header').click(function() {
        $(this).siblings('.tail-container').toggle();

        tokens = $(this).text().split(' ');
        waypointKey = tokens[2];

        Waypoint.refreshAll();
        waypoints[waypointKey].disable();
    });

    for(var i = 1; i < tailHeaders.length; i++) {
        waypoints[i + 1] = new Waypoint({
            element: tailHeaders[i],
            context: $('#container'),
            handler: function(direction) {
                if (direction === 'down') {
                    var clone = this.adapter.$element.clone();

                    mainTailHeader.empty().append(clone);
                }

                if (direction === 'up') {
                    var clone = this.previous().adapter.$element.clone();

                    mainTailHeader.empty().append(clone);
                }
            }
        });
    }

</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Waypoints Elements Different Heights</title>

	<style>
	html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	}

	#container {
	width: 1000px;
	height: 80%;
	border: solid 2px black;
	margin: 60px auto 0 auto;
	overflow: scroll;
	}

	.tail-header {
	height: 40px;
	background-color: red;
	border-bottom: solid 2px black;
	}

	.stuck {
	position: fixed;
	top: 62px;
	width: 985px;
	}

	.taller {
	height: 80px
	}
	</style>
	</head>
	<body ng-app="main">
	<div id="container"></div>

	<script src="node_modules/jquery/dist/jquery.js"></script>
	<script src="node_modules/waypoints/lib/jquery.waypoints.js"></script>
	<script src="node_modules/waypoints/lib/shortcuts/sticky.js"></script>
	<script src="node_modules/handlebars/dist/handlebars.js"></script>

	<script id="tail-list" type="text/x-handlebars-template">
	{{#each tails}}
	<div class="tail">
	<div class="tail-header {{#if taller}}taller{{/if}}"
	{{#if @first}}id="main-tail-header{{/if}}">Tail Header {{ number }}</div>
	<div class="tail-container">
	<h1>Tail Number {{ number }}</h1>

	<p>Eveniet quaerat, vitae. Aspernatur error exercitationem id molestias unde! Dolore dolores ea
	necessitatibus optio quas quia quos repudiandae veritatis? Asperiores aspernatur debitis error fugit
	molestias nobis officiis, quibusdam quidem veritatis?</p>

	<p>Architecto culpa quae repellat sapiente suscipit, unde veritatis. Accusantium aliquid beatae, ea earum
	eveniet ipsam ipsum molestias, nam nisi numquam omnis possimus, quaerat ratione repudiandae sapiente
	sequi similique tempore voluptate!</p>

	<h1>Tail Number {{ number }}</h1>
	</div>
	</div>
	{{/each}}
	</script>

	<script>
	var context = {
	tails: []
	};

	for(var i = 1; i < 501; i++){
	context.tails.push(
	{
	number: i,
	taller: false
	}
	);
	}

	context.tails[2].taller = true;
	context.tails[6].taller = true;
	context.tails[12].taller = true;
	context.tails[17].taller = true;
	context.tails[22].taller = true;
	context.tails[38].taller = true;

	var templateScript = $('#tail-list').html();
	var template = Handlebars.compile(templateScript);
	$('#container').html(template(context));

	var waypoints = {}, tokens, waypointKey;

	var mainTailHeader = $('#main-tail-header');

	var sticky = new Waypoint.Sticky({
	element: mainTailHeader,
	context: $('#container')
	});

	var tailHeaders = $('.tail-header');

	$('.tail-header').click(function() {
	$(this).siblings('.tail-container').toggle();

	tokens = $(this).text().split(' ');
	waypointKey = tokens[2];

	Waypoint.refreshAll();
	waypoints[waypointKey].disable();
	});

	for(var i = 1; i < tailHeaders.length; i++) {
	waypoints[i + 1] = new Waypoint({
	element: tailHeaders[i],
	context: $('#container'),
	handler: function(direction) {
	if (direction === 'down') {
	var clone = this.adapter.$element.clone();

	mainTailHeader.empty().append(clone);
	}

	if (direction === 'up') {
	var clone = this.previous().adapter.$element.clone();

	mainTailHeader.empty().append(clone);
	}
	}
	});
	}

	</script>
	</body>
	</html>