jPinning is a small and simple jquery plugin to pin your headers only while the users are scrolling up.
Getting started
Set up your HTML markup.
<header class="your-header-class">
...
</header>
Move the /jPinning folder into your project
Add jPinning.min.css in your <head>
<link rel="stylesheet" type="text/css" href="jPinning/jPinning.min.css"/>
Add jPinning.min.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jPinning/jPinning.min.js"></script>
Initialize your slider in your script file or an inline script tag
$(function(){
$('.your-header-class').jPinning({
setting-name: setting-value
});
});
When complete, your HTML should look something like:
<html>
<head>
<title>My Awesome Website</title>
<link rel="stylesheet" type="text/css" href="jPinning/jPinning.min.css"/>
</head>
<body>
<header class="your-header-class">
...
</header>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jPinning/jPinning.min.js"></script>
<script type="text/javascript">
$(function(){
$('.your-header-class').jPinning({
setting-name: setting-value
});
});
</script>
</body>
</html>
Settings
Offset
Type: boolean(false) | int(pixels) | string(auto)
Default: false
Offset for header to hide in pixels. If it's set on 'auto' it will take the height of the header as offset.
onPin
Arguments: none
Fires when the header shows up.
Events
onUnpin
Arguments: none
Fires when the header hides out.