bootstrapで作成したnav要素をfixedで上部固定しようと思っています
navがページの最上部ではなく途中(ヘッダーの下あたり)にあるので
jqueryでnavが隠れるまでスクロールしたらnav要素にfixedのclassを追加し
CSSでfixedを指定しています。
PCなどではスムーズにnav内のドローップダウンを開いた状態でスクロールしても表示されたままfixedに移るのですが
iphoneではスクロール中はfixedのnavが表示されず、スクロールが止まるとfixedされたnavが表示されます
一瞬なので気にするまでもないかも知れませんが
ドロップダウンを開いたままだと一部の要素は表示されたままでnavbarだけがスクロール停止すると表示されます
丁度このサイトのnavの様にスクロールが終わると表示されます(PCでは問題ない)
http://web-pc.net/jquery008
iphoneなどスマホでもPCの様にスムーズにfixedさせる事は可能でしょうか?
<html> <head> ・ ・ <link href="style.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function($) { var nav = $('#fixedBox'), offset = nav.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { nav.addClass('fixed'); } else { nav.removeClass('fixed'); } }); }); </script> ・ ・ </head> <body> ・ ・
<div id="fixedBox" class="nav"> <ul> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> </ul> </div>
.fixed { position: fixed; top: 0; width: 100%; z-index: 10000; }
こんな感じです
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/05 01:57
2017/01/05 03:14