<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> Multiple Sticky Titles with CSS and JS</title>
<style>
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Multiple Sticky Titles with CSS and JS</h1>
<h2>https://www.geeksforgeeks.org/how-to-get-the-div-height-using-javascript/</h2>
<a href="https://codepen.io/ShopifyPartners/pen/EWoYMp">Link help</a>
<br>
<br>
<div class="clrfx1">
<div class="followMeBar cubox"><p class="bg-info col-2 col-sm-6 text-white ">A<br>A<br>
A<br>
A
</p>
</div>
<div class="col-sm-12">
<div class="row">
<!--<div class="cnp col-sm-6 ">
</div>-->
<div id="mrgdemo" class="cnpt col-10 offset-sm-2 col-sm-6 offset-sm-6 bg-danger text-white ">
<p>1 st line</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><h1>1111111</h1>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class=" my_container bg-dark text-white">
<br>
<br>
<div class="clrfx2">
<div class="followMeBar p-0 container b_box"><p class="bg-info col-sm-6 text-white ">B B B<br>2<br>
B<br>
B <br>
how-<br>
to -<br>
get -the -div -height -using -javascript
</p></div>
<div class="col-sm-12 ">
<div class="row">
<div id="b_demo" class=" col-sm-6 offset-sm-6 bg-light text-success">
<p > 2nd line</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><h2>2 22</h2>
</div>
</div>
</div>
</div>
<div class="clrfx3">
<div class="followMeBar container p-0 c_box"><p class="bg-info col-sm-6 text-white ">C C C<br>2<br>
CC<br>
C<br>
<br>
CC <br>
CCCCCCC CCCC CCCCCC<br>
<br>
<br>
<br>
<br>
</p></div>
<div class="col-sm-12">
<div class="row">
<!--<div class="cnp col-sm-6 ">
</div>-->
<div id="c_demo" class=" col-sm-6 offset-sm-6 bg-success">
<p >3rd line</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><h1>1111111</h1>
</div>
</div>
</div>
</div>
<div class="clrfx4">
<div class="followMeBar container p-0 idx-z ">
<div class=" bg-dark col-sm-12 r_margn"><p class="bg-info col-sm-6 text-white row ">DDDDD<br>2<br>
CC<br>
C<br>
<br>
CC <br>
DDD<br>
<br>
<br>
<br>
<br>
</p></div>
</div>
<div class="col-sm-12">
<div class="row">
<!--<div class="cnp col-sm-6 ">
</div>-->
<div id="zc_demo" class=" col-sm-12 zoffset-sm-6 bg-success">
<p >444 th line</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <p>On some mobile platforms there are lists that group items under multiple headings. 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><h1>1111111</h1>
</div>
</div>
</div>
</div>
<div class="bg-danger">
<div class="followMeBar container zalgn_le0"><div class="bg-info col-sm-6"><p>B</p></div></div>
<br><h3>2222222222222</h3>
Content for class "bg-danger" Goes Here</div>
<div class="followMeBar container"><p class="bg-info col-sm-6">C</p></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar container"><p class="bg-info col-sm-6">D</p></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar container"><p class="bg-info col-sm-6 float-right">E</p></div>
<br>
<br>
<br>
<br>
<br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar container"><p class="bg-info col-sm-6 float-right">F</p></div>
<br>
<br>
<br>
<br>
<br><p> Loriumepsum doller ffffffff <br>
Loriumepsum doller ffffffff <br>
Loriumepsum doller ffffffff <br>
Loriumepsum doller<br>
Loriumepsum doller ffffffff <br>
Loriumepsum doller ffffffff </p>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar container pdng_r">
<div class="bg-info col-sm-6 float-right rgt_mrg"><p class="" >G</p></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar container pdng_r">
<div class="bg-danger col-sm-12 mrg_le15 "><p class="">L llll</p></div>
</div>
<br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
<br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
<div class="clrx5">
<div class="followMeBar container pdng_r">
<div class="bg-danger col-sm-12 mrg_le15 "><p class="">L 2222</p></div>
</div>
<div>
<br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p><br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
</div>
</div>
<div class="clrx5">
<div class="followMeBar container pdng_r">
<div class="bg-danger col-sm-12 mrg_le15 "><p class="">L 2222 <br>
<br>
<br>
<br>
</p></div>
</div>
<div>
<br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p><br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
</div>
</div>
<div class="clrx5">
<div class="followMeBar container pdng_r">
<div class="bg-danger col-sm-12 mrg_le15 "><p class="">L 2222</p></div>
</div>
<div>
<br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p><br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar container row"><p class="bg-info col-sm-12 zfloat-left m-auto zmr-1"><a class="bg-white" href="#">Click to view</a></p></div>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar container row p-0">
<div class=" col-sm-12 "><p class=" bg-danger">M</p></div>
</div>
<br>
<br>
<br>
<br>
<br><p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="followMeBar bg-success">N</div>
<p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller </p>
Loriumepsum doller <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar bg-success">O</div>
<p> Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller <br>
Loriumepsum doller<br>
Loriumepsum doller <br>
Loriumepsum doller </p>
<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>
<script>
divElement = document.querySelector(".cubox");
elemHeight = divElement.offsetHeight;
document.getElementById("mrgdemo").style.marginTop = -elemHeight + "px";
////// document.getElementsByName("fname")[0].style.marginTop = -elemHeight + "px";
////// document.getElementsByClassName("example")[0].style.marginTop = -elemHeight + "px";
//document.getElementsByClassName("example");
//document.getElementsByName("fname");
//document.getElementsByName("fname")[0].tagName;
divElement1 = document.querySelector(".b_box");
elemHeight = divElement1.offsetHeight;
document.getElementById("b_demo").style.marginTop = -elemHeight + "px";
divElement2 = document.querySelector(".c_box");
elemHeight = divElement2.offsetHeight;
document.getElementById("c_demo").style.marginTop = -elemHeight + "px";
</script>
</body>
</html>
.followMeBar {
/* background: #e64a19;*/
padding: 0px 0px;
position: relative;
z-index: 1;
color: #30c;
}
.followMeBar.fixed {
position: fixed;
top: 0;
width: 100%;
box-sizing: border-box;
z-index: 0;
}
.followMeBar.fixed.absolute {
position: absolute;
}
/* For aesthetics only ------------------------------------------------------------------*/
body {
margin: 0;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
h1 {
font: 200 1.2em "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-weight: 200;
color: #fff;
background: #039be4;
padding: 20px;
margin: 0;
border-bottom: 10px solid #ccc;
strong {
font-family: "Segoe UI Black";
font-weight: normal;
}
}
.explanation {
padding: 20px;
max-width: 600px;
p {
max-width: 300px;
color: #fff;
font-size: 0.8rem;
}
}
.followMeBar.container.fixed .mrg_le15{
margin-left:-15px !important;}
.followMeBar.container{
padding:0px;}
.followMeBar.container.pdng_r.fixed{
padding:0px 15px;}
.followMeBar.container .rgt_mrg{
margin-right:0px;
}
.followMeBar.container.fixed .rgt_mrg{
margin-right:15px;
}
.followMeBar.container.fixed.idx-z{
z-index:999;}
.followMeBar.container.fixed .r_margn{
width: calc(100% - 30px);}
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"));
});
