<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ts Sticky Simple</title>
<link data-require="bootstrap-css" data-semver="3.3.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="script.js"></script>
</head>
<body class="ts-sticky-simple-container">
<header>
<nav class="navbar navbar-default">
<div class="container ts-sticky-simple-header" data-top="0" data-fade="true">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Ts Sticky -Simple-</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-xs-4 ts-sticky-simple-container">
<div class="ts-sticky-simple-demo-1" data-top="240" data-fade="true">
A basic sticky element
</div>
<div class="ts-sticky-simple-demo-2" data-top="100" data-fade="true" data-full="true">
A sticky element with fade and full transformation
</div>
</div>
<div class="col-xs-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet tincidunt sollicitudin. Proin sagittis turpis semper purus gravida sit amet tempus nisi blandit. Phasellus ut consectetur mauris. Donec vel ligula eu erat tempus tincidunt
et ac dolor. Sed dui lectus, varius eget dictum pretium, convallis quis dui. Nam sed magna urna. Praesent eget eleifend libero. Duis volutpat, dolor nec scelerisque porttitor, justo nisl sagittis tellus, sed luctus nibh sem eu metus. Phasellus
in nisi diam.
</p>
<p>Donec mattis erat ac lorem tempus vitae condimentum dui pulvinar. Vestibulum auctor augue ut enim tempor commodo. Curabitur ornare eleifend lectus, eget rutrum nunc bibendum vel. Maecenas sodales, dui nec condimentum rutrum, nunc lacus lacinia
augue, a laoreet risus sapien a neque. Nam purus sapien, elementum nec congue vitae, vehicula non sapien. Suspendisse ullamcorper egestas molestie. Mauris luctus ligula id nibh fermentum sodales lobortis erat lobortis.Cras erat neque, dignissim
in interdum a, placerat ut felis. In sapien nibh, tincidunt non porttitor id, volutpat ut mauris. Sed sed mauris nibh.
</p>
<p>Proin dui nibh, facilisis sed bibendum nec, viverra eget mauris. Aliquam leo nulla, adipiscing sed fermentum a, sagittis sit amet quam. Proin scelerisque lectus rhoncus erat congue a pellentesque felis vestibulum. Pellentesque aliquet ante sed
nunc sodales a scelerisque dolor malesuada. Phasellus ut nibh justo. Nunc fringilla, nunc in mattis feugiat, ligula nulla porta mi, ac dignissim risus dui non ipsum. Mauris mollis risus sit amet nisl euismod vitae pellentesque augue euismod.
Quisque venenatis gravida dapibus. Sed ornare, dolor in rhoncus sollicitudin, erat sapien accumsan magna, ac pulvinar mi elit in tellus. Ut hendrerit mollis felis, sed pharetra quam aliquam eu.</p>
</div>
<div class="col-xs-12">
<p style="clear: both;">Phasellus consectetur volutpat tortor at faucibus. Cras eu purus ipsum, quis hendrerit libero. Morbi ullamcorper porta risus, ac varius massa volutpat et. Integer semper convallis purus vitae pharetra.Vestibulum facilisis, neque nec mollis pretium,
felis elit pulvinar tortor, eu vestibulum magna mauris blandit orci. Suspendisse potenti. Nulla molestie magna nec nisi auctor rhoncus. Cras auctor, lectus nec semper rutrum, turpis enim pellentesque massa, ornare condimentum lorem justo eu
velit. Quisque eget laoreet elit. Donec viverra ultricies fringilla.</p>
<p>Phasellus aliquet lorem in quam sodales nec rutrum erat bibendum. Proin eu nulla enim, sit amet porttitor nisi. Aliquam erat volutpat. Morbi in mollis libero. Nulla luctus lacinia lectus, in faucibus lacus adipiscing nec.Aliquam adipiscing odio
non sem elementum facilisis. Nulla ultrices consectetur augue, sed sagittis nulla scelerisque in. In ante elit, ultricies sagittis bibendum at, cursus et quam. Praesent nec malesuada dolor. Cras ut turpis velit.</p>
</div>
</div>
</div>
</body>
</html>
$(function() {
$(document).ready(function() {
ts_sticky_simple();
});
/******************************
*
* Sticky -Simple-
* Without constrained by parent
*
******************************/
function ts_sticky_simple() {
var sticky_simple = $('*[class*="ts-sticky-simple"]:not(.ts-sticky-simple-container)');
if (sticky_simple.length > 0) {
$.each(sticky_simple, function(i, value) {
var item = $(this),
container = item.closest('.ts-sticky-simple-container'),
top_sticky = item.offset().top,
top = 0,
full = false,
fade = false,
width;
// Optional parameters
top = parseInt(item.attr('data-top'));
full = item.attr('data-full');
fade = item.attr('data-fade');
if (full) {
width = $(window).width();
} else if (container.length > 0) {
width = container.width();
}
$(window).scroll(function(e) {
var y = $(this).scrollTop();
if (y >= top_sticky - 10) {
if (!item.hasClass('fixed')) {
item.css('top', top + 'px');
if (full) item.css('left', 0);
if (width > 0) item.css('width', width);
if (fade) {
item.addClass('fixed').hide().delay('fast').fadeIn('slow'); // 200 - 400
} else {
item.addClass('fixed');
}
}
} else {
if (item.hasClass('fixed')) {
item.removeClass('fixed');
if (width > 0) item.css('width', '');
}
}
}); // $(window).scroll();
$(window).resize(function() {
if (full) {
width = $(window).width();
} else if (container.length > 0) {
width = container.width();
}
if (item.hasClass('fixed')) {
if (full) item.css('left', 0);
if (width > 0) item.css('width', width);
}
}); // $(window).resize();
}); // $.each();
}
}
});
body {
font-size: 21px;
}
p {
margin: 0 0 3.4em;
line-height: 2.9rem;
}
.navbar {
padding: 60px 0 30px;
background: WhiteSmoke;
}
nav .container {
background: WhiteSmoke;
}
.navbar-header {} .navbar-right {} .navbar-nav > li {} .navbar-collapse.collapse {} .navbar-brand {}
.navbar-brand {font-size: inherit;}
/* Custom Style */
[class*="ts-sticky-simple"] {}[class*="ts-sticky-simple-demo"] {
font-weight: bold;
color: white;
padding: 15px;
}
.fixed {
position: fixed;
z-index: 999;
/* overwritten by js */
top: 0;
}
.ts-sticky-simple-header {} .ts-sticky-simple-demo-1 {
background: Teal;
}
.ts-sticky-simple-demo-2 {
background: LightSeaGreen;
}
# jQuery Sticky -Simple-
jQuery Sticky -Simple-, the simplest sticky element written in jQuery.
This version only contains a minimum performance of your targeted HTML block element to be fixed in relation to its position to the “top”
meaning the top edge of the browser body.
Whereas this version is very lightweight,
it is important to note that it doesn’t stick to its parent so when scrolling down,
the element overlaps the bottom part of content.
It is suitable for a header element which in most of cases doesn’t reach the content on the bottom by mouse scrolling.
Refer to [this website](http://tuningsynesthesia.com/tools/blog/jquery-sticky-simple/) for more details and
[this Plunk]() for its pure JavaScript version coded as an Angular.js module.