Skip to content

Instantly share code, notes, and snippets.

Created February 23, 2016 14:54
Show Gist options
  • Save anonymous/c67b57d2734e31c18c88 to your computer and use it in GitHub Desktop.
Save anonymous/c67b57d2734e31c18c88 to your computer and use it in GitHub Desktop.
Multiple Sticky Titles with CSS and JS
<section class="image">
</section>
<section class="intro">
<h1>Multiple Sticky Titles with CSS and JS</h1>
<p>On some mobile platforms there are alphabetical lists that use the letter as a title or heading. As you scroll through the list, the current title or heading follows you until you reach the next one at which point the current one is pushed up and the
new title or heading docks to the top.
<br>This snippet emulates this functionality.</p>
</section>
<div id="followMeBar1">A</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">B</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">C</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">D</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">E</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">F</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">G</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">H</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">I</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">J</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">K</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">L</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">M</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">N</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">O</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">P</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">Q</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">R</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">S</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">T</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">U</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">V</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">W</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">X</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">Y</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">Z</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Multiple Sticky Titles with CSS and JS

On some mobile platforms there are alphabetical lists that use the letter as a title. As you scroll down the list the current title follows you until you reach the next one at which point the current one is pushed up and the new title docks to the top. This snippet emulates this functionality.

Forked from Chris Spittles's Pen Multiple Sticky Titles with CSS and JS.

A Pen by Captain Anonymous on CodePen.

License.

window.onscroll = function() {myFunction()};
console.log('intro: ' + $('section.image').height())
function myFunction() {
if (document.body.scrollTop > $('section.image').height() || document.documentElement.scrollTop > $('section.image').height()) {
document.getElementById("followMeBar1").className = "fixed";
} else {
document.getElementById("followMeBar1").className = "";
}
}
var stickyHeaders = (function() {
var $window = $(window),
$stickies;
var load = function(stickies) {
if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {
$stickies = stickies.each(function() {
var $thisSticky = $(this).wrap('<div class="followWrap" />');
$thisSticky
.data('originalPosition', $thisSticky.offset().top)
.data('originalHeight', $thisSticky.outerHeight())
.parent()
.height($thisSticky.outerHeight());
});
$window.off("scroll.stickies").on("scroll.stickies", function() {
_whenScrolling();
});
}
};
var _whenScrolling = function() {
$stickies.each(function(i) {
var $thisSticky = $(this),
$stickyPosition = $thisSticky.data('originalPosition');
if ($stickyPosition <= $window.scrollTop()) {
var $nextSticky = $stickies.eq(i + 1),
$nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');
$thisSticky.addClass("fixed");
if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {
$thisSticky.addClass("absolute").css("top", $nextStickyPosition);
}
} else {
var $prevSticky = $stickies.eq(i - 1);
$thisSticky.removeClass("fixed");
if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {
$prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
};
return {
load: load
};
})();
$(function() {
stickyHeaders.load($(".followMeBar"));
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
#followMeBar1 {
width: 100%;
position: absolute;
background: #FFF;
position: fixed;
padding: 20px 20px;
z-index: 1;
color: #000;
top:-41px;
border-bottom: 2px solid #999;
transform: translate(0px,-41px);
transition: 300ms ease-in;
&.fixed {
box-sizing: border-box;
z-index: 0;
transform: translate(0px,41px);
transition: 300ms ease-out;
}
}
.followMeBar {
background: #999;
padding: 20px 20px;
position: relative;
z-index: 1;
color: #000;
}
.followMeBar.fixed {
background: #FFF;
position: fixed;
top: 0;
width: 100%;
box-sizing: border-box;
z-index: 0;
border-bottom: 2px solid #999;
transition: background-color 0.5s ease;
}
.followMeBar.fixed.absolute {
position: absolute;
}
/* For aesthetics only */
body {
margin: 0;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
.intro {
padding: 40px;
}
.image {
height: 200px;
background-image: url("http://localhost:8080/img/bg/saxo_building_desktop.jpg");
}
.intro h1 {
font: 200 1.7em Segoe UI, "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-weight: 200;
color: #666;
}
.intro p {
max-width: 600px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment