スタッフブログ

ヘッダー固定で
ページ内リンク

2020年2月10日

検索すれば多数ヒットするのですが、自分がわすれないために。

ヘッダーなどをページ上部に固定させた場合、ページ内リンクを設けるとヘッダーの下に隠れてしまう現象。

アンカーがページの上部に移動し、その上に position:fixed; と z-index を指定したことが原因。

なので、ヘッダーの高さの分だけアンカーをずらせばよい。
方法は CSS と jQuery の２通り。

#anchorText{
margin-top:-100px; /* ヘッダーの高さ */
padding-top:100px; /* ヘッダーの高さ */
}

jQuery では、target.offset().top にヘッダーの高さ分を引けばよい。

position = target.offset().top - 100;

ホームページ制作を承ります

相模原市にある会社・店舗・事務所様からのご依頼大歓迎！

【士業】: 弁護士(法律事務所)，公認会計士，税理士，司法書士，行政書士，社会保険労務士など
【住まい】: 不動産，工務店，建設・建築会社，設計事務所，リフォーム会社，建物管理会社，電気工事，水道工事など
【乗り物】: 中古車ショップ，バイクショップ，自転車ショップ，自動車整備，運転代行など
【飲食業】: レストラン，カフェ，甘味処，洋菓子店，パン屋など
【医療・福祉】: 病院，クリニック，歯科医，整体院，接骨院，介護センターなど
【美容・健康】: トレーニングジム，エステサロン，ネイルサロン，美容院，美容室など
【教育・育児】: 専門学校，学習塾，幼稚園，保育園，認定保育園，カルチャースクール，パソコン教室など
【その他】: イベントサイト，産業廃棄事業，リサイクルショップ，雑貨店，ペットショップ，旅館，楽天市場店舗・Yahoo!ストア・MakeShopなど
【外注元】: デザイン事務所、広告代理店、ホームページ制作会社など

上記以外の業種でもホームページ制作・WEBシステム/アプリケーション開発につきましては、神奈川県相模原市中央区にあるオフィス木蓮までお気軽にご連絡・お問い合わせください。スマートフォン・タブレット対応、WordPress によるホームページ制作もお任せ下さい。他社が制作されたホームページでも対応します。また、ウェブアクセシビリティ(Webアクセシビリティ)対応のご相談も承ります。

スタッフブログ

ヘッダー固定でページ内リンク

ホームページ制作を承ります

相模原市にある会社・店舗・事務所様からのご依頼大歓迎！

ヘッダー固定で
ページ内リンク