jQuery で固定フロートバナーを途中から表示(ミンミン)

みんなのミント サイトで使用した
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>