ミギムキ

[jQuery] サブウインドウを画面の外からスライドインさせたい

動作イメージ

スポンサー広告

サンプルコード

html

<div class="slide_window" id="slide_window"> <button class="slide_window_close"></button> <div class="slide_window_content"> <p>サンプルテキストサンプルテキスト</p> <p>サンプルテキストサンプルテキスト</p> <p>サンプルテキストサンプルテキスト</p> </div> </div>

CSS

.slide_window { position: fixed; bottom: -100%; right: 60px; padding: 30px; border: 2px solid #3388dd; background-color: #fff; opacity: 0; transition: 1s; } .slide_window.js_active { bottom: 10px; z-index: 9999; opacity: 1; } .slide_window_close { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; transform: rotate(45deg); border: none; background: none; outline: none; } .slide_window_close:before, .slide_window_close:after { position: absolute; top: 0px; left: 0px; width: 3px; height: 3px; background-color: #3388dd; content: ""; } .slide_window_close:before { top: 50%; transform: translateY(-50%); width: 100%; } .slide_window_close:after { left: 50%; transform: translateX(-50%); height: 100%; } .slide_window_close:hover { cursor: pointer; }
  • サブウインドウ(=「slide_window」クラス)は「position: fixed;」で画面に対して固定の座標に配置するようにし、「bottom: -100%;」でウインドウの高さ分画面の外に隠れるよう指定します
  • スクロールが行われると、サブウインドウに「js_active」クラスが設定されます。「js_active」クラスが有効になったときに「bottom: 10px;」とすることで、画面外にいたウインドウが表示されます
  • この座標の移動がアニメーションで行われるよう、サブウインドウに「transition: 1s;」を指定しています

jQuery

jQuery(function($) { const slideWindow = $('#slide_window'); let isSlidable = true; $(window).scroll(function() { if(isSlidable) { if($(this).scrollTop() > 300) { slideWindow.addClass('js_active'); } else { slideWindow.removeClass('js_active'); } } }); slideWindow.find('.slide_window_close').click(function() { isSlidable = false; slideWindow.removeClass('js_active'); return false; }); });
  • 「$(window).scroll(function() { ~ }」で画面のスクロールを検知し、300px以上スクロールされているならサブウインドウに「js_active」クラスを設定します
スポンサー広告

横からスライドさせたい場合

CSS

.slide_window { position: fixed; bottom: 60px; right: -100%; padding: 30px; border: 2px solid #3388dd; background-color: #fff; opacity: 0; transition: 1s; } .slide_window.js_active { right: 10px; z-index: 9999; opacity: 1; }
スポンサー広告

セッションが終わるまでは再表示させたくない場合

jQuery

jQuery(function($) { const slideWindow = $('#slide_window'); $(window).scroll(function() { if(!sessionStorage.getItem('slide_banner')) { if($(this).scrollTop() > 300) { slideWindow.addClass('js_active'); } } }); slideWindow.find('.slide_window_close').click(function() { sessionStorage.setItem('slide_window', 'invalid'); slideWindow.removeClass('js_active'); return false; }); });