2016-09-29 34 views
0

固定ヘッダー(50ピクセル)を考慮して、マイナスマージンアプローチを使用してページに複数のアンカーを使用しています。各セクションが指定された高さを持つとき、アンカーは素晴らしい仕事をしました。コンテンツに基づいて動的に動作するように変更したとき、私はサイドナビの箇条書き(あなたのアンカーに基づく色の変更)で問題を引き起こしているスペースを少し残して、約5ピクセル上にアンカーします。現在、jQueryはアンカー用のコードを生成していますが、変更を加えずにhrefをリンクにハードコーディングしました。何かご意見は?ここ は、HTMLの抜粋です: HTML/CSS anchor divの上にアンカー固定

<div id="main-anchor" class="anchor"></div> 
<section class="main page-section"> 
    <div class="section-heading"> 

アンカークラス:

.anchor { 
    content: ""; 
    display: block; 
    height: 50px; 
    margin-top: -50px; 
    padding: 0; 
    position: relative; 
    top: 0; 
} 

the white line in the red shouldn't be showing

*編集:ソリューション - 私はjQueryの中のdivの高さの2つのインスタンスの後者を持っていました50ピクセルではなく51ピクセルで、私のアンカーの上に隙間ができました。 JavaScriptの

デモなし

+1

あなたはhttp://jsfiddle.netに単純化されたサンプルコードを作ることはできますか?現在あなたの質問の状態は、十分な情報やコードを持っていません – Huangism

+0

[固定ヘッダを調整するためにhtmlアンカーをオフセットする]可能な複製(http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor- to-adjust-for-fixed-header) – rafaelcastrocouto

+1

この問題の重複はあまりありません。コードがないために謝ります。問題を見つけました、ありがとうございます。私のjQuery –

答えて

1

ソリューション:http://jsbin.com/warixef/1/edit?html,css,output

body { 
 
    margin: 0; 
 
    margin-top: 50px; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    text-align: right; 
 
    max-width: 400px; 
 
} 
 
a {color: white;} 
 
.fixed-header { 
 
    background: slateblue; 
 
    padding: 1em; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    max-width: 400px; 
 
    box-sizing: border-box; 
 
} 
 
.page-section { 
 
    background: lightblue; 
 
    padding: 1em; 
 
} 
 
.section-heading { 
 
    font-size: 110%; 
 
    display: block; 
 
    margin: 1em 0; 
 
    text-decoration: none; 
 
} 
 
.section-heading:hover { 
 
    text-decoration: underline; 
 
} 
 
.anchor { 
 
    position: relative; 
 
    top: -50px; 
 
} 
 
.section-content h1 { 
 
    text-align: left; 
 
} 
 
footer { 
 
    text-align: left; 
 
    background: slateblue; 
 
    padding: 1em; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    </head> 
 
    <body> 
 
    <div class="fixed-header">Fixed Header</div> 
 
    <div id="main-anchor" class="anchor"></div> 
 
    <section class="main page-section"> 
 
     <a href="#title1" class="section-heading">#Anchor1</a> 
 
     <a href="#title2" class="section-heading">#Anchor2</a> 
 
     <a href="#title3" class="section-heading">#Anchor3</a> 
 
     <div class="section-content"> 
 
     <div id="title1" class="anchor"></div> 
 
     <h1>Title 1</h1> 
 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p> 
 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p> 
 
     <div id="title2" class="anchor"></div> 
 
     <h1>Title 2</h1> 
 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p> 
 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p> 
 
     <div id="title3" class="anchor"></div> 
 
     <h1>Title 3</h1> 
 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p> 
 
     <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem</p> 
 
     </div> 
 
    </section> 
 
    <footer><a href="http://stackoverflow.com/questions/39780187/html-css-anchoring-above-anchor-div">SO Answer</a> </footer> 
 
    </body> 
 
</html>

関連する問題