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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4318閲覧

Jqueryの挙動を修正したい。スクロール値からのfadeIn fadeOut

extliger

総合スコア30

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/07/11 05:42

いつもご教授頂きましてありがとうございます。

Jqueryの挙動を修正したいのですが上手く修正が出来ません。
やりたい事としましては
スクロール値を取得し0ならfadeOut
スクロールを始めるとfadeInというシンプルな物です。
(スマートフォン上での動作です)

$(function() { $(window).scroll(function () { var s = $(this).scrollTop(); var m = 100; setTimeout(function(){ if(s > m) { $(".fix_menu").fadeIn('slow'); } else if(s < m) { $(".fix_menu").fadeOut('slow'); } },500); }); });

サイトスタート位置まで来ますと消える仕組みです。
動作はしております。

少し改良を加えて

$(function() { $(window).scroll(function () { var s = $(this).scrollTop(); var m = 100; setTimeout(function(){ if(s > m) { $(".fix_menu").stop().fadeIn('slow'); } else if(s < m) { $(".fix_menu").stop().fadeOut('slow'); } },500); }); });

このようにしました。
これである程度挙動を制御出来たのですが

指でスクロール中はアニメーションが停止し半透明などになります。
このスクロール中でもfadeIn,fadeOutを続行するようには出来ないものなのでしょうか?

お手数おかけいたしますがよろしくお願い致します。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

質問のコードでは、scrollイベントが呼び出されるたびにsetTimeoutの登録がされています。
scrollイベントはちょっとスクロールされる間に何十回と呼び出されるものですので、$(".fix_menu")fadeOut,fadeIn,stopを何十回と繰り返そうとして、結果的に点滅状態になるのです。
fadeInなどの呼び出しは、スクロール値が一定の高さを超えたその瞬間だけ呼び出すようにすれば、問題は起きません。
また、ディレイ部分としてsetTimeoutを使われていますが、jQueryならば、delayを使えば、fadeInなどのアニメーション処理と相性がよいです。

javascript

1var s_old = $(window).scrollTop(); 2$(window).scroll(function () { 3 var m = 100; 4 var s = $(this).scrollTop(); 5 if ((s_old < m)&&(m <= s)){ 6 $(".fix_menu").stop().delay(500).fadeIn('slow'); 7 } else if ((s < m)&&(m <= s_old)){ 8 $(".fix_menu").stop().delay(500).fadeOut('slow'); 9 } 10 11 s_old = s; 12});

これでおおむね希望通りの動作になるはずです。
stopは消したほうが良いかもしれません。好みで調整してください。

投稿2017/07/15 08:32

zohnam

総合スコア1441

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

extliger

2017/07/18 12:35

ご回答頂いていたのに期間があいてしまい申し訳ありません。 想像通りの挙動になりました! お力を貸していただきありがとうございます!
yumisaiki

2019/05/13 02:36 編集

私は、よくある、スクロールのスクリプトを書いて、fadeInの前に単純にdelay()を入れたら、トップに行った時に消えるというのが、うまくいかず、大変悩み、こちらにたどりつきました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問