javascript中級者です。
Jqueryで、iPad環境で、スクロール中(タッチパッドから指を離さない)に、fadeInが発生しません。
いろいろ調べてみましたが、touchmoveイベントを使っているのにfadeInの方だけダメで、
慣性スクロールが終了した後にしかfadeInしてくれません。
・fadeOutの方はスクロール中であっても、消えてくれます。
・.fadeIn()の代わりに、.css()などではスクロール中でも変化するので、イベント自体は発生しているようです。
・iOSの環境はバージョン9.3.5です。
・iOS10のバージョンでも同様でした。
よろしくお願いします。
lang
1$(function(){ 2 //固定メニューをスクロールで表示・非表示 3 var fix_menu = $('#js-fix_menu'); 4 //表示する高さ 5 var visible_pos = 700; 6 $(window).on("scroll touchmove", function(){ 7 if($(this).scrollTop() > visible_pos){ 8 fix_menu.fadeIn('fast'); 9 } 10 else{ 11 fix_menu.fadeOut('fast'); 12 } 13 }); 14});
lang
1<body> 2 <div class="hero"> 3 <p>Hero Area</p> 4 </div> 5 <div id="js-fix_menu" class="fix_menu"> 6 <p>Fix Menu</p> 7 </div> 8 <div class="contents"> 9 <p>Page Contents</p> 10 </div> 11</body>
lang
1html{ 2 width: 1024px; 3 margin:0 auto; 4} 5p{ 6 color:#fff; 7 font-size:16px; 8 text-align: center; 9 margin:20px auto 0; 10} 11.hero{ 12 width:1000px; 13 height:300px; 14 background:tomato; 15 margin:0 auto; 16} 17.fix_menu{ 18 display:none; 19 position:fixed; 20 top:0; 21 left:0; 22 right:0; 23 margin:0 auto; 24 width: 100%; 25 height:80px; 26 background: #f75586; 27 box-shadow: 0 3px 5px 0 rgba(0,0,0,.15); 28 z-index: 99; 29} 30.contents{ 31 width:1000px; 32 height:2000px; 33 margin:40px auto; 34 background: #ddd; 35}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/24 11:04 編集
2017/01/25 01:15
2017/01/25 04:02
2017/01/25 05:13
2017/01/26 08:52 編集