固定ヘッダーの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.cssはこのようになっています。上から下にスクロールした際
元のWordPressのヘッダー→追記したclingifyヘッダー→スクロールが過ぎるとclingifyヘッダーが上部に固定という動きをします。

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

よろしくお願いします。

Comments

[x_x]

https://teratail.com/questions/91213 と同じですよね？

Answer 1

id="navhead"が固定された時に「js-clingify-locked」というクラスがタグに追加されませんか？
もしかしたらクラス名が違うかもしれませんが、スクロールしたタイミングで何かしらclassを吐き出していると思います。

吐き出されたclassに関連させてcssをつければ上書きされてデザインが変更できるはずです。

例

#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;
}

//クラスが追加された時のliだけ変更
.js-clingify-locked .nav-persistent li {
  color: #ff0000;
}