NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

ページの最下部まで移動したら情報を表示する

2015年1月14日jQueryのみでつくるギミック

ページの最下部まで移動したら情報を表示する

ブログ等のサイトで、スクロールしていって最後まで記事を読んだ時に、お勧めの記事などの目立たせたい追加情報を表示したい時に使えそうです。

デモページ

JavaScript

(function($){
	$(function() {
	
		var information = $('#information');
		$(information).hide();
		
		var scrollBottom;
		var lastSection = $('#pageBottom').offset().top;
		
		function getScroll(){
			scrollBottom = $(window).scrollTop() + $(window).height();
			if(scrollBottom >= lastSection){
				$(information).fadeIn('first');
			}
		}
		
		$(window).on('load scroll resize', getScroll);	
		
	});
})(jQuery);

参考サイト

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. ページの最下部まで移動したら情報を表示する

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com