みんなのミント サイトで使用した
1、awesome アイコンをホバー時に動かす animation用のcssの読み込み
2、フロートバナーのjQuery
記述場所は 子テーマの header.php (head 〜 /head の間)
<?php wp_head(); ?>
awesome のアイコンをホバーで動かすために animation.css を読み込む ↓
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css"
type="text/css" media="all" />
固定フロートバナーを途中から表示されるためのjQuery
ライブラリよ読み込む
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> //スクリプトの宣言
jQuery(function($) { //本来ここは $(function() { で書き始めるが、ワードプレスは「$」を読み込まないため、この様な記述とする【重要!】
var pageTop = $('#fixed_right_banner'); //css html でフロートバナーに付与したid名 class でも使用可 その際は.float となる「.」を忘れずに!
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 700) { //この時点でバナーが表示されるようになる
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
/* pageTop.click(function () { // トップへ戻る場合の記述。 ただし今回は別ページへ飛ばすためコメントアウトしている
$('body, html').animate({scrollTop:0}, 500, 'swing');
return false;
});*/
});
</script>
</head>
参考サイト(jQuery)
参考サイト(Font Awesome)
これはシンプルなコードでわかりやすかったが、読み込み時にバナーが表示されてしまう。スクロールで非表示になるが残念。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery(window).on("scroll", function($) {
if (jQuery(this).scrollTop() > 700) {
jQuery('#fixed_right_banner').show();
} else {
jQuery('#fixed_right_banner').hide();
}
});
</script>