スクロールに応じたSNSボタンやプロフィールの表示

前回の記事で、紹介した「スクロール量に合わせてボタンを表示する」ですが色々と応用がきくので、今回は前回のスクリプトを応用して、最近のブログでよく見るプロフィール表示やSNSボタンのスライド表示サンプルを紹介したいと思います。

$(function() {
	$(window).scroll(function () {
		var s = $(this).scrollTop();
		var m = 300;
		var n = 500;
		if(s > m) {
			$("#profile").fadeIn('slow');
		} else if(s < m) {
			$("#profile").fadeOut('slow');
		}
		if(s > n) {
			$("#sns").animate({left: 0},{duration: 'fast', easing: 'linear'});
		} else if(s < n) {
			$("#sns").animate({left: -96},{duration: 'fast', easing: 'linear'});
		}
	});
});

解説

スクリプトの基本的なつくりは前回を同じなので細かい解説は前回記事を参照して下さい。
→スクロール量に合わせてボタンを表示する

今回のサンプルの動作としては、
①スクロール量が300px以上だとプロフィールを表示し、300px以下の場合は非表示にする。
②スクロール量が500px以上だとSNSボタンをスライド表示し、500px以下の場合は非表示にする。
の2つになります。

前回とのスクリプト上の相違点としては、if文が増えたくらいです。

		if(s > m) {
			$("#profile").fadeIn('slow');
		} else if(s < m) {
			$("#profile").fadeOut('slow');
		}
		if(s > n) {
			$("#sns").animate({left: 0},{duration: 'fast', easing: 'linear'});
		} else if(s < n) {
			$("#sns").animate({left: -96},{duration: 'fast', easing: 'linear'});
		}

変数s（スクロール量）が変数m（300）より多ければID名「profile」の要素を表示し、少なければ非表示に、変数s（スクロール量）が変数n（500）より多ければID名「sns」の要素を表示し、少なければ非表示にするといった具合です。

不明点がある場合はページの下部よりコメントを頂ければお答えします。