アンカーリンクがずれるのを直したい
解決済
回答 4
投稿
- 評価
- クリップ 1
- VIEW 18K+
レスポンシブ形式のWEBサイトで、
【ヘッダーをページの途中で固定】
【ページ内リンクで飛んだ際、固定されたヘッダーの高さ分の余裕を持たせたい（リンク先がずれるのを直したい）】
です。
http://www.yumemono.net/anchor-link-shifted/
こちらのサイトを参考に、【ページの途中でヘッダーを固定】はできたのですが、
アンカーリンクで飛んだ際、ヘッダー分の高さが調整されませんでした。
JSのアンカーリンク部分をどう修正すればよいのかわからず、どなたかお教えいただけると助かります。
/*****************************************
ナビゲーション固定
*****************************************/
$(window).on('scroll', function() {
if ($(this).scrollTop() > 50) {//固定するまでの距離
$('.header-fixed').addClass('fixed-header');
} else {
$('.header-fixed').removeClass('fixed-header');
}
});
/*****************************************
固定ヘッダーでアンカーリンクがずれる対策
*****************************************/
$(function(){
var navLink = $('.anchor a');
var headerHight = $('.header-fixed').outerHeight(true);
navLink.click(function(){
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight;
$('body,html').animate({
scrollTop: position
}, 500);
return false;
});
}); .header-fixed{
width: 100%;
z-index: 999;
}
.fixed-header{
position:fixed;
top:0;
left:0;
z-index:10000;
}
.header{
color:#fff;
background-color: #111;
}
.wrapper{
width: 100%;
position:relative;
}
.title{
padding: 0 .5rem;
background-color:#ccc;
}
.page{
min-height: 500px;
}<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link href="normalize.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
</head>
<body id="wrap">
<div class="header-fixed">
<div class="header">
<div class="gNavIn">
ヘッダー部分（レスポンシブのため高さは可変）
</div>
</div>
</div>
<div class="wrapper">
<div class="pageContents anchor">
<ul>
<li><a href="#hoge1">見出し1</a></li>
<li><a href="#hoge2">見出し2</a></li>
</ul>
</div>
<div class="page" id="hoge1">
<div class="title">見出し1</div>
<p>見出し1の本文テキスト</p>
</div>
<div class="page" id="hoge2">
<div class="title">見出し2</div>
<p>見出し2の本文テキスト</p>
</div>
</div>
</body>
</html>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
なぜずれるのか
→.header-fixedの要素がposition:fixedになったことにより、ページ全体（html、body）の高さが変わってしまったからです。
親要素は子にあるposition:fixed(absolute)の分の高さを計算しなくなります。
解決策
アプローチが異なるいくつかの方法が考えられますが、私だったら下記のようにします。
.header-fixedにposition: absolute;top:0を指定しておく。
.header-fixedの初期スタイルに
.header-fixed{
position: absolute;
top: 0;
}を指定します。これによってアンカーリンクのズレはなくなるかと思います。
ただ、これだけだとヘッダがページに被って表示されてしまいますのでbodyにヘッダーの高さ分のpadding-topを付けます。
固定値であればcssに書いても良いのですが、環境によって高さが変わるそうなのでjsでつけます。
// 変数 headerHight にヘッダの高さが入っている想定
$('body').css('padding-top', headerHight);要件によってはこれでは不足しているかもしれません。
ただ、現時点の実装でズレる要因が「ページの高さが変わっているから」という点がわかれば解決まで行けるかと思います：）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。
margin-top:-100px;
padding-top:100px;
JSとかだと難しいのでposition:stickyのほうが使いやすいですよ！
下記に使い方のリンク先載せておきます
https://q-az.net/position-sticky/
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
まず、ヘッダーの高さが動的に変わるということなので、事前に計算できずクリック後に計算しなければなりません。
navLink.click(function(){
var headerHight = ...(略)さらに、途中でヘッダーが固定されることで上にかぶってくる分だけではなく、それまでいたヘッダーがいなくなることで全体が上に移動してしまうため補正量が2倍になります。
ここはふつうにスクロールしていてもガクガクして気になるのでスタイルシートで調整したほうがいいかもしれません。
navLink.click(function(){
var headerHight = $('.header-fixed').outerHeight(true) * 2;投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
margin か padding をつけてみてはいかがでしょうか。
.page { padding-top: 50px; /* 固定ヘッダのサイズ */ }投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 89.20%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2017/06/14 18:30
こちらの方法で無事意図した表示が出来ました。