I have the following code:
Code:
<div class="orbit" role="region" aria-label="Slideshow" data-orbit>
	<ul class="orbit-container">
		<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀&#xFE0E;</button>
		<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶&#xFE0E;</button>
		<li class="is-active orbit-slide">
			<img class="orbit-image" src="..." alt="Slide 1">
			<figcaption class="orbit-caption">Bounce Houses</figcaption>
		</li>
		<li class="orbit-slide">
			<img class="orbit-image" src="..." alt="Slide 2">
			<figcaption class="orbit-caption">Slides</figcaption>
		</li>
		<li class="orbit-slide">
			<img class="orbit-image" src="..." alt="Slide 3">
			<figcaption class="orbit-caption">Combos</figcaption>
		</li>
	</ul>
	<nav class="orbit-bullets">
		<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
		<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
		<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
	</nav>
</div>

<!-- And -->
<div class="row">
	<div class="columns large-12" data-sticky-container>
		<div class="sticky" data-sticky data-stick-to="bottom">
			<nav role="navigation">
				<ul class="breadcrumbs">
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">FAQ &amp; Tips</a>
					</li>
					<li>
						<a href="#">Terms of Service</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
And I'm using the following CDNs:
Foundation: https://cdn.jsdelivr.net/foundation/...dation.min.css and https://cdn.jsdelivr.net/foundation/...ndation.min.js
JQuery: https://ajax.aspnetcdn.com/ajax/jQue...y-3.1.1.min.js

However, whenever I try to debug my code, I have two issues:
  1. The orbit will only allow me to navigate left or right once, then nothing happens if I click a navigation again.
  2. The sticky doesn't work at all.


I'm not sure what is causing the issue though. Also, I'm not sure if the sticky is what I'm after. The behavior that I want is for the footer to appear after the last bit of content, but if the last bit of content doesn't give the browser a vertical scroller then I want it to be at the very bottom.

What is odd is if I use CodePen, with the same external links, the neither the orbit nor the sticky work at all.
Fiddle: http://codepen.io/anon/pen/dNqpjz