Skip to content

Instantly share code, notes, and snippets.

@jhines2k7

jhines2k7/waypoints-with-one-sticky-tail-header-and-refresh-on-click.html

Created July 23, 2015 20:32
Show Gist options
  • Save jhines2k7/48ab9b3da201b1c010a1 to your computer and use it in GitHub Desktop.
Save jhines2k7/48ab9b3da201b1c010a1 to your computer and use it in GitHub Desktop.
Download ZIP
Waypoints with one sticky tail header and refresh on click
Raw
waypoints-with-one-sticky-tail-header-and-refresh-on-click.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 class="tail">
<div class="tail-header" id="main-tail-header">Tail Header 1</div>
<div class="tail-container">
<h1>Tail Number 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam asperiores assumenda
consequatur culpa eius enim error esse excepturi hic, iure laudantium molestiae odio quod ratione sequi
unde voluptate. Voluptas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem commodi consequatur dolores et iure,
magnam quasi rem totam? Ab aperiam cupiditate eaque et iure mollitia nihil quibusdam reiciendis, sit
tenetur.</p>
<h1>Tail Number 1</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 2</div>
<div class="tail-container">
<h1>Tail Number 2</h1>
<p>Ab ad amet aut autem consequuntur, cumque enim illo laboriosam magnam maxime mollitia nam nemo porro,
ratione repellat repudiandae veritatis vitae. Beatae consequuntur dolorem id odio perspiciatis qui
soluta voluptatem.</p>
<p>Aliquid asperiores commodi corporis deserunt dicta ducimus, eaque esse est, ex expedita illo ipsa iure
laboriosam laudantium maxime modi nostrum odit omnis porro quaerat quia quibusdam quis rem temporibus
velit.</p>
<h1>Tail Number 2</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 3</div>
<div class="tail-container">
<h1>Tail Number 3</h1>
<p>Aspernatur aut cumque, debitis dolorem doloremque eaque eos incidunt iusto laboriosam libero magnam magni
natus neque nisi nostrum obcaecati quasi quisquam quod reprehenderit saepe similique tenetur ullam velit
veritatis vitae?</p>
<p>Aperiam enim ipsam necessitatibus quaerat tenetur voluptates voluptatibus! Accusantium corporis enim nam
odit pariatur. Assumenda consequatur culpa distinctio dolor illo, inventore magni minus nihil officia
pariatur, rerum saepe sunt ut?</p>
<h1>Tail Number 3</h1>
</div>
</div>
<div class="tail">
<div class="tail-header taller">Tail Header 4</div>
<div class="tail-container">
<h1>Tail Number 4</h1>
<p>Assumenda blanditiis culpa dolor fuga iste libero, molestias nam! Accusamus aliquam asperiores aut
cupiditate deleniti, ea enim eum harum id illo incidunt nihil non quas ratione reiciendis repellat sint
vero.</p>
<p>Amet at commodi dolor eligendi eum excepturi, fuga in incidunt iste, molestiae nam nisi, nulla numquam
recusandae rem sunt ut! A cupiditate est expedita id totam. Ea eum ipsum quae.</p>
<h1>Tail Number 4</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 5</div>
<div class="tail-container">
<h1>Tail Number 5</h1>
<p>Deleniti dolorem nisi pariatur, perspiciatis rem sint voluptas! Atque consectetur culpa dolor dolores
error esse facere, harum id iusto libero, modi molestias numquam placeat quisquam quod repellat sequi
soluta sunt.</p>
<p>Deserunt ea expedita in sequi sunt? Aliquam beatae ducimus exercitationem mollitia necessitatibus
obcaecati repellendus. Commodi ducimus earum impedit laboriosam, magnam, minima nihil obcaecati, odio
officiis qui reprehenderit sapiente sequi tenetur!</p>
<h1>Tail Number 5</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 6</div>
<div class="tail-container">
<h1>Tail Number 6</h1>
<p>Accusamus ad blanditiis commodi cum cumque doloribus ducimus eius eligendi facere illo incidunt iste
itaque iure libero, nobis nostrum nulla odio officiis quia recusandae reiciendis temporibus totam vel
velit vero!</p>
<p>Consequatur, consequuntur corporis cum expedita fuga id labore necessitatibus non provident quas quia
quisquam quos recusandae rerum ullam, unde veniam! Aliquid debitis dolorem ducimus itaque maiores
obcaecati quas totam voluptate?</p>
<h1>Tail Number 6</h1>
</div>
</div>
<div class="tail">
<div class="tail-header taller">Tail Header 7</div>
<div class="tail-container">
<h1>Tail Number 7</h1>
<p>A aliquid autem delectus distinctio dolorum eum excepturi explicabo facilis harum incidunt labore
laboriosam magni minima minus mollitia, nobis numquam provident quis ratione reiciendis rem saepe sunt
totam veritatis voluptatem.</p>
<p>Ad aliquam aliquid aspernatur, at aut cum distinctio dolor eius error eveniet excepturi hic illo ipsa
iure magnam natus odio officiis praesentium quam quasi quia quisquam quos similique tenetur
veritatis!</p>
<h1>Tail Number 7</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 8</div>
<div class="tail-container">
<h1>Tail Number 8</h1>
<p>Accusamus amet beatae consequuntur doloremque dolores ducimus enim esse explicabo, fuga fugiat impedit
iure laboriosam laudantium minus modi nihil odit perspiciatis, quidem reiciendis repellendus sed sit
tempora vero voluptate voluptates!</p>
<p>Animi aperiam dolore dolorem dolores, eos excepturi, fuga illo ipsum itaque molestias, necessitatibus
perspiciatis quas rem saepe velit! Aperiam consectetur iure modi nobis, quae ratione rerum saepe.
Corporis, est, saepe.</p>
<h1>Tail Number 8</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 9</div>
<div class="tail-container">
<h1>Tail Number 9</h1>
<p>A alias culpa harum in ipsum natus nobis officia possimus quos similique, tempore, vel, voluptatibus. Aut
beatae cum error impedit laudantium natus quas reiciendis tenetur? Assumenda dignissimos nemo officia
unde?</p>
<p>Corporis deleniti laborum quam reiciendis. Accusamus consectetur consequuntur delectus distinctio dolores
dolorum ducimus eius fuga inventore ipsa mollitia odit officia perferendis placeat porro, repellendus
reprehenderit sapiente similique sint tenetur! Hic!</p>
<h1>Tail Number 9</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 10</div>
<div class="tail-container">
<h1>Tail Number 10</h1>
<p>Dolores ipsa natus odit saepe veniam. Ab accusantium alias assumenda commodi et excepturi fugit ipsum
magni maxime molestias mollitia perferendis placeat, porro praesentium quis ratione rem repudiandae
sequi soluta temporibus.</p>
<p>Alias atque aut debitis distinctio doloremque et ex excepturi explicabo facilis illo incidunt iure
laudantium magni neque, nisi omnis optio pariatur provident quidem rerum sint tempore unde ut voluptas
voluptatibus.</p>
<h1>Tail Number 10</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 11</div>
<div class="tail-container">
<h1>Tail Number 11</h1>
<p>A adipisci cupiditate deleniti dicta dolorem dolorum ducimus eligendi eveniet fuga impedit iure magni
modi natus, necessitatibus numquam obcaecati odio officiis quaerat quasi quibusdam quisquam, voluptates,
voluptatibus. Cum repellat, similique.</p>
<p>A accusantium aperiam assumenda consectetur cumque deleniti dicta dolorem ea earum eos expedita illum
inventore magni, minus nostrum, quaerat quasi quidem rerum sequi soluta tenetur ullam ut vel vero
voluptates.</p>
<h1>Tail Number 11</h1>
</div>
</div>
<div class="tail">
<div class="tail-header taller">Tail Header 12</div>
<div class="tail-container">
<h1>Tail Number 12</h1>
<p>Ad aliquid cupiditate dolores esse fuga fugit minima molestias officia perspiciatis quia quos rem sit,
temporibus! Ad, autem consequuntur distinctio facere magnam nam necessitatibus nobis porro quae
reiciendis, repudiandae saepe.</p>
<p>A ad at, distinctio ex fuga itaque iure nemo nihil nostrum vitae! Accusantium deleniti deserunt dolorum
exercitationem laboriosam mollitia nesciunt repellendus reprehenderit ullam! Aperiam commodi in magni
praesentium quas. Tempore.</p>
<h1>Tail Number 12</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 13</div>
<div class="tail-container">
<h1>Tail Number 13</h1>
<p>Ea fuga necessitatibus nemo recusandae sequi! Consequatur debitis dolorum laudantium maxime odio odit
pariatur ratione reprehenderit repudiandae vel! Dolor dolorum exercitationem incidunt ipsam laboriosam
nisi praesentium quo rem repellendus tempore!</p>
<p>Eveniet itaque minus placeat! Architecto consequuntur illum maiores mollitia odio pariatur, rem sint!
Animi assumenda atque consequuntur delectus enim id incidunt libero maxime minus nobis, obcaecati odio
repellat sunt ut!</p>
<h1>Tail Number 13</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 14</div>
<div class="tail-container">
<h1>Tail Number 14</h1>
<p>Ab aut consequatur cupiditate delectus dolores et fugit illum iure laborum praesentium provident quae,
quasi, rem, saepe similique sit unde? Ab cum harum ipsa magni nobis? Eligendi laborum maxime nemo.</p>
<p>Animi, aperiam dicta distinctio dolorem doloremque esse exercitationem explicabo fuga fugit iure
molestiae natus reprehenderit sit! At beatae corporis culpa cupiditate fugit perspiciatis tempora
voluptatum. Ducimus nam porro tempore vel!</p>
<h1>Tail Number 14</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 15</div>
<div class="tail-container">
<h1>Tail Number 15</h1>
<p>Adipisci aliquam amet animi beatae blanditiis consequuntur cum cumque debitis eaque earum et id incidunt
inventore iste maiores minus mollitia, nam neque omnis quas quidem repellat rerum tempora totam
vitae.</p>
<p>Aliquam, animi blanditiis consequuntur deleniti earum exercitationem explicabo id impedit, nostrum,
obcaecati omnis optio sequi temporibus ut vel. Consectetur consequatur cum ea eligendi excepturi minima
necessitatibus numquam, omnis vel voluptates.</p>
<h1>Tail Number 15</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 16</div>
<div class="tail-container">
<h1>Tail Number 16</h1>
<p>Accusamus aliquid at, beatae dolore exercitationem facilis in incidunt maiores, maxime minima mollitia
nemo neque non nulla provident quaerat quasi, quis quo quod ratione repudiandae sunt suscipit tempora
unde voluptatum.</p>
<p>Aspernatur deserunt fugiat odio officiis tempora? Amet asperiores, atque debitis dignissimos, doloremque
dolorum explicabo id ipsum modi molestiae optio praesentium provident qui quos repudiandae sunt
temporibus veritatis. Non officiis, quae!</p>
<h1>Tail Number 16</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 17</div>
<div class="tail-container">
<h1>Tail Number 17</h1>
<p>In laudantium, velit! Asperiores consequatur dolore dolorem ducimus eaque error, fugiat hic id in
laboriosam libero maiores minima molestiae nostrum pariatur placeat ullam unde? Accusamus impedit
mollitia non repudiandae sit!</p>
<p>Animi beatae consequatur ea eaque earum enim est, ipsa ipsam iure minima nostrum officia quae sequi
suscipit voluptas! Aspernatur illo laudantium nemo sed voluptatibus. Dolore exercitationem incidunt
minima praesentium quae.</p>
<h1>Tail Number 17</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 18</div>
<div class="tail-container">
<h1>Tail Number 18</h1>
<p>At dolore dolorem, ducimus expedita libero ut vero? Accusantium delectus dolores, eos itaque iusto magnam
molestiae mollitia nisi quam quo reiciendis sunt voluptatem. Beatae earum optio, possimus reprehenderit
sunt veritatis.</p>
<p>Blanditiis consequuntur cupiditate debitis dignissimos dolor dolorem, et fuga incidunt inventore ipsum
libero magni maiores minus modi necessitatibus omnis pariatur quam, quia quos repellat saepe sequi sit
temporibus totam voluptatum.</p>
<h1>Tail Number 18</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 19</div>
<div class="tail-container">
<h1>Tail Number 19</h1>
<p>A accusamus accusantium aliquam commodi culpa dignissimos eaque eligendi ex exercitationem facilis harum
id, illo inventore itaque mollitia nisi pariatur placeat quasi quidem repellendus rerum sequi similique
soluta tenetur voluptas!</p>
<p>Accusamus accusantium aut autem beatae debitis dicta est eveniet expedita fugiat hic illo in magnam
maiores neque numquam quae sapiente, suscipit, ullam vel voluptatem. Amet praesentium quaerat recusandae
rem sapiente?</p>
<h1>Tail Number 19</h1>
</div>
</div>
<div class="tail">
<div class="tail-header">Tail Header 20</div>
<div class="tail-container">
<h1>Tail Number 20</h1>
<p>Aspernatur, at dolore est itaque perspiciatis sequi voluptatibus. Ad aperiam assumenda, error illo
inventore iure laboriosam laborum, placeat, possimus quaerat quia quibusdam repellendus saepe.
Blanditiis dolorem ipsam modi possimus veritatis?</p>
<p>Amet, atque aut cumque doloremque eos error est eveniet excepturi expedita fugit ipsa itaque laudantium,
maxime nemo quibusdam quos repellendus rerum sint tempora tenetur. Autem, dolore, laudantium. Doloribus,
odit perferendis.</p>
<h1>Tail Number 20</h1>
</div>
</div>
</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>
var waypoints = {};
var sticky = new Waypoint.Sticky({
element: $('.tail-header:first'),
context: $('#container')
});
var tailHeaders = $('.tail-header');
var mainTailHeader = $('#main-tail-header');
$('.tail-header').click(function() {
$(this).siblings('.tail-container').toggle();
var tokens = $(this).text().split(' ');
var 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment