BOOK Studio947
狩野祐東・狩野さやか著書

ナビゲーション固定後の、ページ内リンクのずれについて。

書籍Q&ACategory: 作りながら学ぶjQueryデザインの教科書ナビゲーション固定後の、ページ内リンクのずれについて。
asked 7年 ago

はじめまして。
日頃より著書を参考にさせていただいております。

著書を参考に、「スクロール後、上部で固定するナビゲーション」、「スクロールするページ内リンク」を利用させていただいたのですが、最初のクリックと二回目以降のクリックでページ内リンクの位置がずれてしまいます。レイアウトとしては、著書のようにサイドバーとコンテンツページのフロート2カラムにして、サイドバーにリンクを設定しています。(サイドバーもスクロール後に固定するようにしていますが、自分流です。)
挙動を見ると、最初のクリックはブラウザの最上部、二回目以降は固定されたナビゲーションの下部を基準に位置をとっているように思えます。
サイドバーをどのタイミングでクリックしても同じ位置にページ内リンクするようにしたいです。

ページ内リンクの位置がずれる原因は何か考えられますでしょうか?
よろしくお願いします。

4 Answers
狩野 祐東 Staff answered 7年 ago

4章のサンプルですね。
このサンプルからどの程度編集されているかにもよりますが、位置がずれるのであれば次のあたりが考えられます。

  1. ナビゲーションを固定するときに身代わりとして挿入する<div>がありますが、これがたとえば、複数挿入されているとか、ナビゲーションの固定が解除されたときに削除されていない
  2. サイドバーに付けるdata-offsettop属性の設定が違うか、この属性値の処理になにか問題がある

推測ですが、2回目のクリックの際、スクロール位置の取得基準点が変わっているというよりは、2回目もページトップからの位置を取得しているけれども、スクロール座標を計算する際に、ヘッダー分(かそれ以上)の高さが足されているのではないかと思います。その辺りを中心に確認してもらえますか? わからなければまたご連絡ください。

answered 7年 ago

狩野様

ご多忙の中、対応をいただきまして感謝をしております。
アドバイスをいただきましたとおり、再確認しましたところ、
明確な問題点がなかなか見つけられず、
(HTML5を意識したつもりのコーディングが知識不足で
機能出来ていなかったのか、などいろいろ検討しました。
いずれにしろ未熟です。。。)
最終的に、再度HTMLの組み直しを実行し、
ナビゲーション、ページ内リンクに加えてサイドバーについても
サンプルを参考にさせていただきました。
結果、思い通りに動かすことが出来ました!!
おかげさまでコードもすっきりしたように思われます。
まだまだ未熟ですが、著書を繰り返し読みこむようにしています。
ありがとうございました。

answered 7年 ago

狩野様

先日、4章のサンプルについて質問をさせていただいたものです。
グローバル、サイドナビの固定につきましては解消出来たのですが、
伴って改善したい点がありまして、アドバイスをいただけましたら幸いです。

①サイドナビとフッターが重ならないようにしたい。
②固定のタイミングでメニューのテキストの色が変わってしまう。
③コンテンツの機能が利かなくなってしまう。

①については、ノートPCなどウィンドウのサイズが狭くなる場合に、
 サイドメニューとフッターが重ならないようにしたいです。
 固定を利用する前の元々のデザインは、フッターは上部とマージンで
 間隔を設定していたので出来ればそのようにしたいです。

②については、ローカル上でSafariのみで起きている挙動ですが、
 グローバル、サイドナビともに固定のタイミングでテキストの色が変わってしまいます。
グローバルナビはテキストと背景画像、サイドナビはテキストのみで
 構成しています。CSSでリンク時やマウスオーバー時の色の指定はしていますが、
 jsの記述等、固定時に影響が出るようなことはしていないつもりなのですが。。。
 ローカル上ですが、FireFox、Cromeでは起きません。IEは未確認です。

③コンテンツ部分に、画像ボタンを設置したリンクがあるのですが、
 サイドメニューの高さに並行する辺りの位置にそのリンクがある場合、
 マウスオーバーもクリックも利かなくなってしまいます。
 画像ボタンのリンクは縦並びに複数あり、CSSでそれぞれマウスオーバー時に変化をつけています。
 サイドメニューの高さに並行する辺りの位置から外れているものは問題無く動作します。
 サンプル04-04を参考にしまして、ページ内リンクの位置を指定することは出来たのですが、
 コンテンツ内のリンクが利かなくて困っております。。。

以上の3点につきまして、度々ではございますがアドアイスをいただけましたら幸いです。

狩野 祐東 Staff answered 7年 ago

ご質問の件について回答させていただきます。

①については、本書の内容を越えるので詳しいお答えは差し控えさせていただきますが、2つほど解決策が考えられます。
1つは、CSS(またはjQuery)でフッターのほうがサイドバーより上に重なるようにできるのではないか、ということ
もう1つは、スクロール位置に領域を定め、サイドバーを上に固定すると同時に、一定以上スクロールされたら下で固定するよう、スクリプトを変更することが可能だと思います。ちょっとチャレンジが必要かもしれません。

②この前たまたま発見したのですが、現バージョンのSafariはaタグのCSSの継承がすこしおかしいようで、親要素のcolorプロパティが継承されてしまうことがあるようです(特定の状況でそうなるのか、常にそうなるかは調べていません)。CSSの仕様上は継承されないのが正しいです。それと関係あるような気がするので、aの通常状態、hover状態などに直接CSSを適用してみてもらえますか?

③これも本書の内容を越えるので詳しいお答えはできませんが、サイドバーか、その画像ボタンのどちらかにパディングが設定されていて、見た目にはわかりませんが片方を覆い隠しているか、スクリプトのどこかで画像ボタンのclickイベントをキャンセルしているか、などの原因が考えられます。その辺りを重点的に調べてみてはいかがでしょうか。