スクロールして画面の下に来た時にパーツをフェードアウト・インする方法。コンタクトボタンやSNSボタンを表示するとか、広告表示を消すとか。そういう時に使えますね。
以下は、右下にdisplay: fixed;で表示していたコンタクトボタンをフェードアウトさせた例です。
/* fixContact */
$(function() {
var fixContact = $('#fixContactBtn');
$(window).bind("scroll", function() {
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
fixContact.fadeOut();
} else {
fixContact.fadeIn();
}
});
});
一番下まで、としないほうがいいんじゃないかということで5%になってます。
