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

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

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

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

jQuery

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

Q&A

解決済

1回答

2087閲覧

スマホだとスティッキーヘッダーのslideDownがうまく動かない

bpbjsu

総合スコア24

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2017/01/09 05:03

###状況
お世話になります。
レスポンシブサイトでスティッキーヘッダーを実装したのですが、スマホで下にスライドすると slideDown ではなく Show を指定した時の様に瞬時に表示されてしまいます。(PCでは問題ありません)

ヘッダーは上部に固定の#headerと、追従するための#changeです。

slideDown に極端な速度を指定した場合は問題なく動作します(5000msなど)。
slowなどは効きませんでした。

調べた所様々な実装方法で解決している記事を見つけましたが、現在の構造のまま解決する方法はありませんでしょうか?

■参考にしたサイト
https://liginc.co.jp/web/html-css/html/92474

//HTML <header id="header"> <div class="inner"> <ul> <li><a href="#"><img src="#"><span>メニュー1</span></a></li> <li><a href="#"><img src="#"><span>メニュー2</span></a></li> <li><a href="#"><img src="#"><span>メニュー3</span></a></li> </ul> </div><!-- /inner --> </header> <div id="change"> <div class="inner"> <ul> <li><a href="#"><img src="#"><span>メニュー1</span></a></li> <li><a href="#"><img src="#"><span>メニュー2</span></a></li> <li><a href="#"><img src="#"><span>メニュー3</span></a></li> </ul> </div><!-- /inner --> </div><!-- /change --> <section id="content"></section>
//CSS //padding,backgroundなどのデザイン的な部分は極力省略しています。 #change { position: fixed; top: 0px; left: 0px; width: 100%; display: none; z-index: 9999; } #header .inner, #change .inner { overflow: hidden; }
//JS //★スティッキーヘッダー var $window = $(window), //ウィンドウを指定 $content = $("#content"), //#content部分 $chenge = $("#change"), //#change部分 topContent = $content.offset().top; //#contentの位置を取得 var sticky = false; $window.on("scroll", function () { if ($window.scrollTop() > topContent) { if ( sticky === false ){ //scroll位置が#contentの下にある場合 $chenge.slideDown(500); //#change部分が降りてくる。 sticky = true; } } else { if ( sticky === true ){ //scroll位置が#contentの上にある場合 $chenge.slideUp(); //#change部分が上がる。 sticky = false; } } }); $window.trigger("scroll");

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

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

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

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

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

naomi3

2017/01/17 12:06

「現在の構造のまま」とはどの部分でしょうか?
naomi3

2017/01/17 12:46

jQueryのバージョンを教えてください。
bpbjsu

2017/01/17 16:47

HTMLの構造を変えずにという意味合いでした、わかりにくくてすみません。jQueryは2.2.4です。
guest

回答1

0

ベストアンサー

うまく動作させるために色々と対策を講じました。
slideDownが重い(?)ので、多少ぎこちなくなるのですが、コマ送りでエミュレートしてみました。
不都合があればframesの数をいじってみてください。

スマホを所有していないので、PC上のエミュレータで試してみたところ、うまくいっているようです。

CSS

1body { 2 position:relative 3} 4#change { 5 position : fixed; 6 top : 0px; 7 left : 0px; 8 width : 100%; 9 display : none; 10 overflow: hidden; 11 z-index : 9999; 12} 13#header .inner, 14#change .inner { 15 overflow: hidden; 16}

JavaScript

1$(function() { 2 var $window = $(window), //ウィンドウを指定 3 $content = $("#content"), //#content部分 4 $change = $("#change"), //#change部分 5 topOfContent = $content.offset().top; //#contentの位置を取得 6 7 var sticky = false; 8 var duration = 500; 9 var frames = 10; // コマ送りの全フレーム数 10 var intervalID = null; 11 var percentage = 0; 12 13 /** 14 * 大きな負荷をかけずコマ送りでslideDown, slideUpメソッドを 15 * エミュレートする関数 16 * @param down true:slideDownする/false:slideUpする 17 */ 18 function slideDownInFrameAdvance(down) { 19 if (intervalID !== null) { 20 clearInterval(intervalID); 21 intervalID = null; 22 } 23 24 intervalID = setInterval(function() { 25 26 // 100%以上または0%以下になったときインターバルを終了 27 if (down && percentage >= 100 || ! down && percentage <= 0) { 28 clearInterval(intervalID); 29 intervalID = null; 30 31 // 終了時には100%または0%ちょうどにする 32 $change.css({ 33 'height' : (down ? '100%' : '0%') 34 }); 35 36 if (! down) { 37 // slideUp終了時には非表示 38 $change.css({ 39 'display' : 'none' 40 }); 41 } 42 return; 43 } 44 45 $change.css({ 46 'display' : 'inline', 47 'height' : percentage + '%' 48 }); 49 50 percentage += 100 * (down ? 1 : -1) / frames; 51 52 }, duration / frames); 53 } 54 55 56 $window.on("scroll", function() { 57 if (($window.scrollTop() > topOfContent) === (sticky === false)) { 58 // ①scroll位置が#contentの下にあり、かつsticky === falseの場合、 59 // または、 60 // ②scroll位置が#contentの上にあり、かつsticky === trueの場合 61 62 // #change部分を、①ならば降ろし、②ならば上げる。 63 slideDownInFrameAdvance(! sticky); 64 // stickyをtrue⇔false反転 65 sticky = ! sticky; 66 } 67 }); 68 $window.trigger("scroll"); 69}); 70

投稿2017/01/18 13:55

naomi3

総合スコア1105

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問