質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16347questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • iOS

    3983questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

jQuery iOS スクロールイベント中に.fadeIn()が発生しない

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,363

grapeee

score 3

javascript中級者です。
Jqueryで、iPad環境で、スクロール中(タッチパッドから指を離さない)に、fadeInが発生しません。
いろいろ調べてみましたが、touchmoveイベントを使っているのにfadeInの方だけダメで、
慣性スクロールが終了した後にしかfadeInしてくれません。

・fadeOutの方はスクロール中であっても、消えてくれます。
・.fadeIn()の代わりに、.css()などではスクロール中でも変化するので、イベント自体は発生しているようです。
・iOSの環境はバージョン9.3.5です。
・iOS10のバージョンでも同様でした。

よろしくお願いします。

$(function(){
  //固定メニューをスクロールで表示・非表示
  var fix_menu = $('#js-fix_menu');
  //表示する高さ
  var visible_pos = 700;
  $(window).on("scroll touchmove", function(){
    if($(this).scrollTop() > visible_pos){
      fix_menu.fadeIn('fast');
    }
    else{
      fix_menu.fadeOut('fast');
    }
  });
});
<body>
  <div class="hero">
    <p>Hero Area</p>
  </div>
  <div id="js-fix_menu" class="fix_menu">
    <p>Fix Menu</p>
  </div>
  <div class="contents">
    <p>Page Contents</p>
  </div>
</body>
html{
  width: 1024px;
  margin:0 auto;
}
p{
  color:#fff;
  font-size:16px;
  text-align: center;
  margin:20px auto 0;
}
.hero{
  width:1000px;
  height:300px;
  background:tomato;
  margin:0 auto;
}
.fix_menu{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  margin:0 auto;
  width: 100%;
  height:80px;
  background: #f75586;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,.15);
  z-index: 99;
}
.contents{
  width:1000px;
  height:2000px;
  margin:40px auto;
  background: #ddd;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

fadeIn処理が何度もやりなおしになっているのではないでしょうか。

$(function(){
  //固定メニューをスクロールで表示・非表示
  var fix_menu = $('#js-fix_menu');
  //表示する高さ
  var visible_pos = 700;
  var changeable = true;
  $(window).on("scroll touchmove", function(){
    if(changeable)
    {
      changeable = false;
      if($(this).scrollTop() > visible_pos){
        fix_menu.fadeIn('slow',function(){//分かりやすくするためにslowにしています
          changeable = true ;
        });
      }
      else{
        fix_menu.fadeOut('slow' ,function(){//分かりやすくするためにslowにしています
          changeable = true ;
        });
      }        
    }

  });
});


上記のコードでうまくいきましたが、もっとスマートな方法があるかもしれません

サンプル

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/24 19:03 編集

    ご回答ありがとうございます!
    ですが、上記でも、ipadで確認しますと
    解決しないようです…

    キャンセル

  • 2017/01/25 10:15

    $(function(){
    console.log("start");

    //固定メニューをスクロールで表示・非表示
    var fix_menu = $('#js-fix_menu');
    //表示する高さ
    var visible_pos = 700;
    var changeable = true;
    var scrollStatus = "over";
    var status ="";
    $(window).on("scroll touchmove", function(){
    console.log("scroll touchmove")
    console.log("changeable = " + changeable)
    console.log("$(this).scrollTop() = " + $(this).scrollTop())
    console.log("scrollStatus = " + scrollStatus)
    console.log("status : " + status)
    if(changeable === true)
    {
    if($(this).scrollTop() > visible_pos && status !== "after fade out"){
    changeable = false;
    console.log("fade in start")
    fix_menu.fadeIn('slow' , function(){
    status ="after fade out";
    console.log("fade in END")
    changeable = true;
    });
    }
    else if ($(this).scrollTop() < visible_pos && status !== "after fade in" ){
    changeable = false;
    fix_menu.fadeOut('slow' , function (){
    status ="after fade in"
    changeable = true;

    });
    };
    }


    });
    });

    上記のコードで、開発者ツールにあるconsoleのログを確認していただいてよろしいでしょうか。

    キャンセル

  • 2017/01/25 13:02

    ありがとうございます。
    私の作業環境にて、iPadでコンソールログを取れる信頼できるブラウザの開発ツールがない状況です。
    申し訳ありません。
    上記、コードの意は理解できました。
    ・フェード処理が重複しないようにフラグを2つ用意する
    この方法でも、問題は解消しないようです。iOSではどうしようもない現象なのかもしれません。

    ちなみに以下のような記事を見つけました。この場合は、CSSのpositionの変更に関わることなので、問題が解消されるようです。今回の場合は、displayの変更ということで、そのあたりに問題があるのかもしれないです。
    「iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は」
    http://wp-e.org/2016/07/15/7096/

    キャンセル

  • 2017/01/25 14:13

    <div id="debug"></div>
    ↑をhtml上に記述して、
    console.log内の文字列を一つの変数(var debugtext など)にし、"scroll touchmove"の度に変数を再代入。
    document.getElementByID("debub").innerHTML = debugtext ;
    などではだめですか?

    キャンセル

  • 2017/01/26 13:55 編集

    ありがとうございます!そういう方法があることを知りませんでした。
    コンソールログを出力するJSプラグインを使って出力を確認できました。

    ここにログを記すと長くなってしまうので、省略ます。
    結果的には、表示判定の境界を越えても、
    ・タッチパッドを離すまでは、status : after fade in への変更 と fade in ENDの出力 は発生しない。
    ・fadeOut()の場合でも、↑上記と同じように、タッチパッドを離すまで、fade out ENDは発生しない。
    ・fadeIn()の方は、画面上は、スクロール中は表示されず、はタッチパッドを離すと、フェードもせず、パッと、show()のように表示される。
    ・fadeOut()の方は、画面上は、スクロール中でも(タッチパッドを離さなくても)、エフェクトが行われ表示される。

    でした。今回のコンソールログでは追えない、もっと内部的な何かということでしょうか。。。

    キャンセル

+1

fadeIn, fadeOutメソッドの実行中かどうかは:animated疑似セレクタが使えるので、それを利用します。
iOSはfixedの要素を操作する場合に表示にバグが出やすいので、許容したほうが良いかもしれません。

$(function() {
  //固定メニューをスクロールで表示・非表示
  var fix_menu = $('#js-fix_menu');
  //表示する高さ
  var visible_pos = 700;
  $(window).on("scroll touchmove", function() {
    // fadeIn, fadeOut中の場合は処理中断
    if(fix_menu.is(':animated')){
      return;
    }
    if ($(this).scrollTop() > visible_pos) {
      fix_menu.fadeIn('fast');
    } else {
      fix_menu.fadeOut('fast');
    }
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/26 13:20 編集

    ご回答ありがとうございます。
    上記コードで試してみましたが、解決しないようです。

    キャンセル

0

http://shanabrian.com/web/javascript/touch-position.php
こちらでタッチ中の座標をとれるようですがこれで行けませんかね?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    エラーは消えたけど...。

    タブの切り替えをやりたいです。 jsの部分がうまくいかないです。 何かいい案ありますでしょうか。 よろしくお願いします。 <html> <head> <title>te

  • 解決済

    CSS floatについて

    質問です。 現在CSSでWebページを作成途中なのですが 例えばブロックを複数並べるために 以下HTML <div class="aaa">ITJoBs<

  • 解決済

    [CSS][JavaScript]スクロールバーが発生する可能性がある要素内でコンテンツを下に配置し...

    スクロールバーが発生する可能性がある要素があり、幅100%の要素を一番下に表示するようにしたいです。 【スクロールが発生しないケース】   要素の一番下に表示させたい。 【ス

  • 解決済

    CSSの上下左右中央寄せについて。

    質問です。 今webページを制作しているのですが ブロック要素を左右中央寄せにした状態で、インライン要素を上下左右中央寄せにするコーディングが全く分からず 困りはてており

  • 解決済

    z-indexが切り替わらない スタック文脈のせい?

    600px以上で上部にメニューを表示し、300px以上ー600px未満で、トグルメニューを表示しています。 下記ページを参考にしました。 参考にしたページ 600px

  • 解決済

    loを加えるとレイアウトが崩れてしまいます。。

    ➀こんな風に、カードが並んでいます。 https://jsfiddle.net/ed0gw9dv/ ➁このカードの上に「div要素のボタン」(画像のマル部分)を表示した

  • 受付中

    CSS レイアウト 単に複雑なレイアウト

    全体は水平中央整列、図のboxは垂直中央寄せ、1から11までのコンテンツは水平中央整列。 boxとコンテンツには画像やテキストを配置したい。 boxはコンテン

  • 解決済

    JavaScriptでクイズを作成したい

    前提・実現したいこと javaScriptで、クイズを作成したいと思っています。 問題表示→正誤・解説表示→次の問題…というようにページが遷移してくようにつくりたいです。また、

同じタグがついた質問を見る

  • JavaScript

    16347questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6674questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • iOS

    3983questions

    iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。