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

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

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

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

Q&A

解決済

2回答

2083閲覧

ページ途中のNAV要素をスクール中でもfixedさせるには?

hyksm

総合スコア174

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

1グッド

0クリップ

投稿2017/01/05 01:30

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; }

こんな感じです

KandaKiyoshi👍を押しています

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

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

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

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

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

guest

回答2

0

自己解決

http://qiita.com/HieroglypH/items/743781f0b87f66d071c5
これで解決出来ました

-webkit-transform: translate3d(0,0,0);

投稿2017/01/05 01:51

hyksm

総合スコア174

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

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

hyksm

2017/01/05 03:14

そうなんですね。確認します ありがとうございます
guest

0

ブラウザの仕様の問題なので難しいです。
なので、参考にされているサイトでもSP表示では固定バーを使用していませんね。
画面の小さなSPで、スクロール中はコンテンツ部分を見せるためにfixedのレイヤー部分を描画していないと考えられるので、
無理に実装することでもないと思います。

投稿2017/01/05 01:42

yamato_hikawa

総合スコア2092

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問