画面下部にオーバーレイの要素を配置しています。
その要素の表示非表示を切り替えたいのですが、うまくいきません。
#overlay
はposition: fixed
の要素です。
ドキュメントが読み込まれたときに要素を下からスライドさせるのはうまくいっています。
この要素をスクロール中・スワイプ中だけ非表示にしたいです。
scroll touchmove
イベントが発生したときにslideToggle()
でアニメーションして非表示にさせたのですが、一度スクロールすると表示非表示を繰り返してしまします。
$('overlay').delay(700).slideToggle();
の部分はスクロールが止まってから0.7秒後に再度出現させるために作ってあります。
コード
javascript
1 (function($){ 2 function show_overlay(){ 3 var W_SIZE = $(window).width(); 4 if (W_SIZE <= 760){ 5 $('#overlay').css('position', 'fixed'); 6 $('#overlay').slideToggle(duration=700); 7 } 8 } 9 $(document).ready(function(){ 10 show_overlay(); 11 }); 12 $(document).on('scroll touchmove', function(){ 13 $('#overlay').slideToggle(); 14 $('overlay').delay(700).slideToggle(); 15 }); 16 })(jQuery);
css
1#overlay{ 2 padding: 3px; 3 background-color: #3499cd; 4 font-weight: bold; 5 color: white; 6 display: none; 7 bottom: 0; 8 left: 0; 9 right: 0; 10 z-index: 3; 11} 12.pos-abs{ 13 position: absolute; 14} 15.pos-fix{ 16 position: fixed; 17} 18 19.ol-inner{ 20 width: 20%; 21 float: left; 22} 23 24.ol-sep{ 25 padding: 5px; 26} 27 28.ol-image00{ 29 max-width: 50%; 30} 31 32.ol-image01{ 33 max-width: 100%; 34} 35 36.ol-text{ 37 padding: 0px; 38 margin: 0px; 39 color: white; 40 font-weight: bold; 41 font-size: 10px; 42 display: block; 43 margin: 0 auto; 44} 45 46.ol-link{ 47 display: block; 48 padding-bottom: 1px; 49 text-decoration: none; 50}
html
1<div id="overlay" class="pos-abs" style="text-align:center;"> 2 <div class="ol-inner"> 3 <div class="ol-sep"> 4 <div class="ol-boder"> 5 <a class="ol-link" href="#"> 6 <img class="ol-image00" src="image.png" alt=""> 7 <img class="ol-image01" src="image.png" alt=""> 8 </a> 9 </div> 10 </div> 11 </div> 12 <div class="ol-inner"> 13 <div class="ol-sep"> 14 <div class="ol-boder"> 15 <a class="ol-link" href="#"> 16 <img class="ol-image00" src="image.png" alt=""> 17 <img class="ol-image01" src="image.png" alt=""> 18 </a> 19 </div> 20 </div> 21 </div> 22 <div class="ol-inner"> 23 <div class="ol-sep"> 24 <div class="ol-boder"> 25 <a class="ol-link" href="#"> 26 <img class="ol-image00" src="image.png" alt=""> 27 <img class="ol-image01" src="image.png" alt=""> 28 </a> 29 </div> 30 </div> 31 </div> 32 <div class="ol-inner"> 33 <div class="ol-sep"> 34 <div class="ol-boder"> 35 <a class="ol-link" href="#"> 36 <img class="ol-image00" src="image.png" alt=""> 37 <img class="ol-image01" src="image.png" alt=""> 38 </a> 39 </div> 40 </div> 41 </div> 42 <div class="ol-inner"> 43 <div class="ol-sep"> 44 <div class="ol-boder"> 45 <a class="ol-link" href="#"> 46 <img class="ol-image00" src="image.png" alt=""> 47 <img class="ol-image01" src="image.png" alt=""> 48 </a> 49 </div> 50 </div> 51 </div> 52</div>
スクロール・スワイプ中だけ非表示にして、スクロールが止まったら表示する方法を教えてください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/13 14:54
2017/06/13 15:34
2017/06/13 18:19