2016-09-29 100 views
0

我在页面上使用了多个锚点,使用负边距方法来计算我的固定标题(50px)。当每个部分都有特定的高度时,锚杆工作得很好。当我改变它们以基于内容动态地工作时,它们锚定在它们应该在的位置上方约5px处,留下一小块空间,这导致了我的侧nav子弹(基于你所在的锚点的颜色变化)的问题。目前,jQuery正在生成用于锚定的代码,但是我已经对链接硬编码了href而没有任何改变。有什么想法吗? 这里是HTML的一个片段: 锚定div上方的HTML/CSS锚定

<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的股利高度的两个实例,后者这是51而不是50像素,这创造了我的主播之上的差距。

+1

你还可以充分http://jsfiddle.net简化的示例代码?目前您的问题的状态,没有足够的信息或代码 – Huangism

+0

可能重复[抵消一个html锚点以适应固定标题](http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-为固定头调整) – rafaelcastrocouto

+1

不是这个问题的重复,对缺少代码表示歉意。找出问题,谢谢。我在我的jQuery –

回答

1

解决方案,而JavaScript的

演示: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>