###状況
お世話になります。
レスポンシブサイトでスティッキーヘッダーを実装したのですが、スマホで下にスライドすると 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");
回答1件
あなたの回答
tips
プレビュー