<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://rawgit.com/charlesbjohnson/bootstrap/affix-bottom-use-bottom-offset/dist/js/bootstrap.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid">
<header class="container-header row">
<div class="col-sm-12">
HEADER
</div>
</header>
<main class="row split-container">
<div class="col-sm-9 filler-container">
FILLER
</div>
<div class="col-sm-3 sticky-container">
<div class="sticky-wrapper js-sticky-wrapper">
<header class="sticky-top">
TOP
</header>
<footer class="sticky-bottom">
BOTTOM
</footer>
</div>
</div>
</main>
<footer class="container-footer row">
<div class="col-sm-12">
FOOTER
</div>
</footer>
</div>
</body>
</html>
$(document).ready(function() {
$(".js-sticky-wrapper").affix({
offset: {
top: 600,
bottom: 600
}
});
});
.container-header, .container-footer, .filler {
height: 600px
}
.filler-container {
height: 1000px;
}
.affix.sticky-wrapper {
top: 0;
}
.affix-bottom.sticky-wrapper {
position: absolute;
}
.sticky-top, .sticky-bottom {
height : 100px;
}
.sticky-top {
margin-bottom: 25px;
}
.sticky-bottom {
margin-top: 25px;
}
.container-header {
background-color: teal;
}
.filler-container {
background-color: pink;
}
.sticky-container {
background-color: antiquewhite;
}
.sticky-top {
background-color: tomato;
}
.sticky-bottom {
background-color: lightblue;
}
.container-footer {
background-color: purple;
}