【コーディング】途中から位置が固定するナビ

解決済

質問者：NGCrosso
質問日時：2013/03/28 10:27
回答数：4件

コーディング初心者です。

以下JINS PCのサイトなんですが、このようにグローバルナビが途中から合流する感じに固定させるにはどんな技術を使えばいいのですか？？
（説明が下手ですみません・・・こんな感じです↓）

http://www.jins-jp.com/jins-pc/

javascriptとか使うのでしょうか・・・
HTMLとCSSしか分からない私でもカンタンに設置出来るようでしたら、コードも添えていただけたら泣いて喜びます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： wo_moon
回答日時：2013/03/28 11:00

js使ってますね。

-----------------------------------------------------------
【外部js】（sample.jsとします）
$(window).scroll(setScrollElements);
function setScrollElements() {
if (scroll > 450) {
$("#fixgnav").css({position: 'fixed',top: '0px'});
console.log($(window).scrollTop());
} else if (scroll < 450) {
$("#fixgnav").css({position: 'absolute',top: '450px'});
}}

【html】
ヘッダー部分
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/sample.js"></script>

本体部分
<div class="slide_area">高さ450pxのエリア</div>
<div id="fixgnav">ナビゲーション部分</div>
-----------------------------------------------------------

スクロールの距離が450px（＝div#slide_areaの高さ）より短ければ、トップから450pxの位置に絶対配置(absokute)、
スクロールの距離が450pxを超えたらトップ0pxの位置に固定配置(fixed)
にjsでしているようです。

下記の参考URLの解説もごらんになるといいと思います。

参考URL：http://unformedbuilding.com/articles/fixed-nav-w …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！とても簡潔で分かりやすいです！！（号泣しています）

ただ・・・、
すみません、試してみようとしたところ、使っていたソフトが<head>が操れないものであることが分かりまして（泣）
もしよろしければこれを<body>内に直接記述する方法を教えていただけませんか？？
（ボタンだったり簡単な<a>タグの挙動であればやり方が探せたのですが、初心者でも分かるようなサイトではあまり複雑なサンプルが探せませんで・・・）

ちなみに<div id="gnav" script="上記のスクリプト">
のようにやると、スクリプト内の大小の「<>」をタグと勘違いしてうまくいかないようです。

追加で長々と訊いてしまい、申し訳ありません。
お時間のある時にでもご返答いただければ幸いです。
ダメもとでお尋ねしているので、もし記述方法が分からなくてもこのご回答にベストアンサーを付けさせていただきます！

通報する

お礼日時：2013/03/28 15:28

No.4

回答者： wo_moon
回答日時：2013/03/28 16:54

なるほふど。

それでは以下のように書くといいでしょう。
そちらの環境がわからないので、外部jsじゃなくHTMLだけで完結する書き方にしますね。

【bodyの中に】-----------------------------------------------
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/j …
<script type="text/javascript">

</script>

<div class="slide_area">高さ450pxのエリア</div>
<div id="fixgnav">ナビゲーション部分</div>

--------------------------------------------------------
↑と書いてください。
注意点は、必ず2～21行目のスクリプトよりも1行目のスクリプトが先に書かれていることです。

追伸：さっきの回答の中で綴りミスがありました。
絶対配置(absokute)（誤）→絶対配置(absolute)（正）
の間違いです。失礼しました。

- 0
- 件

通報する

この回答へのお礼

お返事が遅れてすみません！
わがままに応えてくださり、本当にありがとうございました！

＞綴りミス
そ、そんなご丁寧に・・・！どうもありがとうございます！

ソフト上でどうにもうまく動かすことができなかったため、
メモ帳でやってみたり、
javascriptに関してはとにかく貼る場所とか意味とか基本的な事が分かっていなかったので、基本からさらってみたりしていました・・・。

その後参照サイトの要素と見比べて検証し、

function setScrollElements() {

の下に

var scroll = $(window).scrollTop();

を加える事で、ついに実装出来ました！！

（横幅いっぱいのグローバルナビを使用した場合では、全体幅とjavascript有効範囲の関係がよく分からずまだ成功していないんですが・・・そこはまた自分で考えてみようと思います。）

でもやりたい事が叶って感激です！
wo_moonさん、本当に本当にありがとうございました！！（もう一度号泣してます！笑）

※こちらは特殊な場合なので、前回の回答にベストアンサーを付けさせていただきますね！

通報する

お礼日時：2013/03/29 15:58

No.3

回答者： Gaffgarion
回答日時：2013/03/28 11:18

質問とサイトをちゃんと見てなかったので、間違った回答をしてしまいました。

自分の回答は無視してください。

- 0
- 件

通報する

この回答へのお礼

こちらこそ説明不足ですみません！
「リンクを開いて、ある程度スクロールしてみてください」という記述が必要でしたよね。
不親切な説明でお時間取らせてしまって申し訳ありませんでした・・・でも他ページとの違いを検証してくださったり、本当にありがとうございました！
またご縁があった時にはよろしくお願いしますね。^^

通報する

お礼日時：2013/03/28 15:35

No.1

回答者： Gaffgarion
回答日時：2013/03/28 10:54

top以外のページ

<body>
<div class="gnavi">グローバルナビ</div>

topページ
<body>
<div class="slidearea">高さ450pxのスライドショー</div>
<div class="gnavi" style="position:absolute;top:450px">グローバルナビ</div>

topページだけposition:absoluteを使ってるようです。
chromeのデベロッパツールやfirefoxのfirebugを使えるようになりましょう。

- 0
- 件

通報する

この回答へのお礼

続くご回答にお返事させていただきました！ありがとうございました。

chromeのデベロッパツールというのは右クリックで出る「要素を検証」の事ですよね？
ちょくちょく使ってみてはいるのですが、まだまだコーディング脳にはほど遠く、色々見過ごしたり、何に掛かっているか分からなかったりと悪戦苦闘中です。。

自分の身の丈にあったサイトを作れば良いのは重々承知なんですが、こう、カッコイイものに出会ってしまうと、どうもいけませんね（笑）

通報する

お礼日時：2013/03/28 15:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！