jQuery

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

March 15, 2016

【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