【jQuery】スティッキーページの為のjQueryプラグイン。Clingify

【jQuery】スクロールするとヘッダーに固定されるstickyナビ系jQueryプラグイン10選でご紹介しました、Clingifyのご紹介です。Clingifyは簡単にヘッダーなどを固定させることができるjQueryプラグインです。

CSS

<link rel="stylesheet" href="/css/clingfy.css" />

jQuery

jQueryは1.7+

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.clingify.js"></script>
<script type="text/javascript">
$(function() {
$('.some-selector').clingify();
});
</script>
$(function() {
var $navBar = $('nav'),
$navParent = $('.primary-content'),
$sidebar = $('.some-sidebar'),
$sidebarParent = $('.secondary-content'),   
matchWidths = function($elem, $elemParent) {
$elem.width($elemParent.width());
},
matchOffset = function($elem, $elemParent) {
$elem.css({'padding-left' : $elemParent.offset().left});
},
resetOffset = function($elem) {
$elem.css({'padding-left' : 0});
};
$navBar.clingify({
extraClass : 'navClingy',
locked : function() {
matchOffset($navBar, $navParent);
},
detached : function() {
resetOffset($navBar);
},
resized : function() {
matchOffset($navBar, $navParent);
}
});
$sidebar.clingify({
breakpoint : 768,
extraClass : 'sidebarClingy',
locked : function() {
matchWidths($sidebar, $sidebarParent);
},
resized : function() {
matchWidths($sidebar, $sidebarParent);
}
});
});

ライセンスはMIT

 

【jQuery】スティッキーページの為のjQueryプラグイン。Clingify

  • LATEST
  • RELATED
  • POPULAR