下からスライドを表示
下からスライドを表示させるには、CSSでbottomを設定。
そうすることで、jQueryの.slideDown()の方向が変わるので、下からスライドを表示することができます。
背景がスクロールしないように固定
何も設定していないと下からスライドを表示した際に、後ろにある要素がスクロールできてしまいます。
なので、後ろの要素をCSSのposition: fixed;で固定し、
スライド表示時は固定
スライド非表示時は固定なし
になるように対応します。
また、後ろの要素は$( window ).scrollTop()で取得した高さを利用し、「スライドを表示」ボタンが押された時に、現在表示されている画面のスクロール値を取得し、値をマイナスにし、CSSの「top」を設定します。
HTML
<div id="wrapper"> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <button class="btn btn_open">スライドを表示</button> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p> <div id="slide"> <button class="btn btn_close">閉じる</button> <p>スライドスライドスライドスライドスライドスライドスライドスライド</p> <p>すらいどすらいどすらいどすらいどすらいどすらいどすらいどすらいど</p> <p>スライドスライドスライドスライドスライドスライドスライドスライド</p> <p>すらいどすらいどすらいどすらいどすらいどすらいどすらいどすらいど</p> <p>スライドスライドスライドスライドスライドスライドスライドスライド</p> <p>すらいどすらいどすらいどすらいどすらいどすらいどすらいどすらいど</p> </div> <div class="overlay"></div> </div>
CSS
body{
margin:0;
padding:0;
}
p{
margin: 0 0 1em;
}
.btn{
line-height: 44px;
text-align: center;
border:none;
}
.btn_open{
background: #0a0;
}
.btn_close{
background: #a0a;
}
#slide{ display: none;
position: fixed;
z-index: 2;
width: 100%;
bottom: 0;
background: #f2f2f2;
border-top: 1px solid #ccc;
}
.overlay{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
jQuery
$(function(){
var wrp = '#wrapper',
btnOpen = '.btn_open',
btnClose = '.btn_close',
sld = '#slide',
ovrly = '.overlay',
current_scrollY;
$(btnOpen).on('click',function(e){
if($(sld).css('display') == 'none'){
current_scrollY = $( window ).scrollTop();
$(wrp).css({
position: 'fixed',
width: '100%',
top: -1 * current_scrollY
});
$(sld).slideDown();
$(ovrly).css('display','block');
}
});
$(btnClose).on('click',function(){
if($(sld).css('display') == 'block'){
$(wrp).attr({style:''});
$('html, body').prop({scrollTop: current_scrollY});
$(sld).slideUp();
$(ovrly).fadeOut();
}
});
$(document).on('click',function(e) {
if($(sld).css('display') == 'block'){
if ((!$(e.target).closest(sld).length)&&(!$(e.target).closest(btnOpen).length)) {
$(wrp).attr({style:''});
$('html, body').prop({scrollTop: current_scrollY});
$(sld).slideUp();
$(ovrly).fadeOut();
}
}
});
});
【参考サイト】
・jQueryで下からニョキッと動かす方法
・モーダルを表示したときに背景部分はスクロールできないようにする
