【JQuery】追従バナー(表示開始位置・表示終了位置設定、スクロール時は非表示)
指定要素が画面に見えたら表示され、別の指定要素が画面に見えたら非表示になり、スクロールしている間は非表示で、スクロールが止まると表示される・・
そんな追従バナーです。
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'); } }); });
コメントを残す