このようにcssのjs-fixed-boxにvisibility: hidden;があるのですが、サイバーエージェントのコーディングルールを見ると、JS-には一切のcssを当ててはいけないと記載があります。
$('#js-fixed-box').メソッドの部分にしか使ってはいけないというのが正しいでしょうか?
するとhiddenもクラスis-hiddenとis-visibleのようなを作って、
<header id="js-fixed-box" class="c-fixed-box u-flexiblebox-centaring-all u-gradient-red-boxshadow is-hidden"></head> このようにすべきでしょうか? ただこうするとクラス名だらけになるのでどうなのかなと思いました。is-hiddenとis-visibleはスライドショーやパララックスなどでも使うのでutilityにしてしまって、すべてで使いまわしても問題ないと思いますか?
確かcssは、見出しなら見出し内など同じような要素間では共有してよいが、この場合は共有してよいと思いますか?
<header id="js-fixed-box" class="c-fixed-box u-flexiblebox-centaring-all u-gradient-red-boxshadow"></head> /* fixed-boxのアニメーション */ [id="js-fixed-box"] { visibility: hidden; } [id="js-fixed-box"].visible { visibility: visible; } $(function(){ $('#js-fixed-box').hide().addClass('visible'); }); $(window).scroll(function(){ if($(window).scrollTop() > 400) { //ゆっくり表記する為のfadein $('#js-fixed-box').fadeIn('slow'); }else{ //ゆっくり隠す為のfadeout $('#js-fixed-box').fadeOut('slow'); } });
最後にcssを一切つけてはいけないということですが
$('#js-fixed-box').cssの場合はcssですが、jqueryでのcssなのでこれは含まないと考えてよいのですよね。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。