さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】追従バナー(表示開始位置・表示終了位置設定、スクロール時は非表示)

Pocket
LINEで送る

指定要素が画面に見えたら表示され、別の指定要素が画面に見えたら非表示になり、スクロールしている間は非表示で、スクロールが止まると表示される・・
そんな追従バナーです。

javascript

$(document).ready(function() {
	var fixedElm = $('.fixedBox'); // fixedする要素
	var fixedStart = $('.box1'); // この要素の上部が画面に表示されたらfixed要素の表示開始
	var fixedEnd = $('.box2'); // この要素の上部が画面に表示されたらfixedが解除される

	fixedElm.css({'display':'none', 'opacity':'0'});

	$(window).on('scroll touchmove',function(){
		var fixedStartVal = fixedStart.offset().top - $(window).height();
		var fixedEndVal = fixedEnd.offset().top - $(window).height();
		if ($(window).scrollTop() < fixedStartVal) {
			fixedElm.css({'display':'none', 'opacity':'0'}).stop();
		} else if ($(window).scrollTop() > fixedEndVal) {
			fixedElm.css({'display':'none', 'opacity':'0'}).stop();
		} else {
			fixedElm.css({'position':'fixed', 'display':'none', 'opacity':'1'}).delay(500).fadeIn('fast');
		}
	});
});

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容