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