Question

我在页面上使用多个锚点使用负边距方法来计算我的固定标题（50px）。当每个部分具有指定的高度时，锚固件工作得很好。当我根据内容将它们更改为动态工作时，它们固定在它们应该的位置上方大约5px，留下一小段空间导致我的侧面导弹子弹出现问题（颜色根据您的锚点而变化）在）。目前，jQuery正在为锚定生成代码，但我已经对链接进行了硬编码，而没有任何更改。有什么想法吗？这是HTML的一小部分：

<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;
}

*编辑：解决方案 - 我在jQuery中有两个div高度的实例，后者是51而不是50像素，这创造了我的锚点之上的空白。

Answer 1

没有javascript的解决方案

演示：http://jsbin.com/warixef/1/edit?html,css,output

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

HTML / CSS锚定在锚点div之上

1 个答案: