clingifyでcssを切り替える

Question

clingifyを自作テーマ（WordPress）を利用しています。http://theroux.github.io/clingify/

<?php get_header(); ?> 
<?php wp_head(); ?>
<!--その他記述あり-->
<header class="first-clingy">
<ul id="navhead" class="nav-persistent">
  <li><a href="#">あああ</a></li>
  <li><a href="#">あああ</a></li>
  <li><a href="#">ああああ</a></li>
</li>
</ul> 	
</header>
<!--その他記述あり-->	

#navhead {
	padding:10px 0 10px 0;
  list-style: none;
 text-align: center;
	background-color: #fff
}

#navhead  li {
  width: 140px;
  text-align: center;
  background-color: transparent;
  display: inline-block;
}

#navhead  li a {
  text-decoration: none;
  color: #444;
}
#navhead li a:hover{
color:#40AAEF;
 border-bottom: dotted 1px #444;
}

<script type="text/javascript">
jQuery(function() {
  jQuery('#navhead').clingify();
});
	jQuery(function() {
    var jQueryclingifyTarget = jQuery('.some-selector'),
        jQueryparent = jQuery('.some-fluid-width-parent-container'),
        matchWidths = function(jQueryelem) {
            jQueryelem.width(jQueryparent.width());
        };
 
    jQueryclingifyTarget.clingify({
        locked : function() {
            matchWidths(jQueryclingifyTarget);
        },
        resized : function() {
            matchWidths(jQueryclingifyTarget);
        }
    });
});
</script>

php・jsはこのようになっています。上から下にスクロールした際
元のWordPressのヘッダー→追記したclingifyヘッダー→スクロールが過ぎるとclingifyヘッダーが上部に固定という動きをします。

追記したclingifyヘッダーと固定された上部のclingifyヘッダーのデザインを別々にしたいと思っています。
この場合はどのような処理をすれば良いのでしょうか？
またはポイントになるとclingifyヘッダーが上部に固定され表示（そのポイントまで非表示）などの処理など、、、

よろしくお願いします。

Answer 1

親にwrapperClassで指定したクラス(初期値"js-clingify-wrapper")、固定されるとlockedClassで指定したクラス(初期値"js-clingify-locked")が付与されるので、別々のスタイルを用意すればいいでしょう。

  jQuery('#navhead').clingify({
    wrapperClass: 'wrapper',
    lockedClass: 'locked'
  });