粘性标题重叠内容

Question

我找到了这个问题的答案，但这对我的情况没有帮助。这是我的site，当我跳转到内容时，标题与粘性标题重叠。

这是我修复它的想法：

1. 我将从链接中获取#team（例如：https://kieferorthopädie-dietze.de/praxis/#team/）

2. 然后将#team与container进行比较，如果container与link的id相同，我会在body中添加padding-top。

3. 如果用户向上滚动，body 将移除 padding-top。

希望任何人都可以告诉我如何编写代码来解决此问题。提前致谢！

Answer 1

您可以在纯 CSS 中执行此操作 - 我自己在 www.cntrl.no/license 上执行（单击索引中的链接之一）

h4::before {
    content: " ";
    display: block;
    height: 7em;
    margin-top: -7em;
    visibility: hidden;
}

当然，那是我使用的h4——当然，你可以用它代替你用来跳转到的任何容器或元素。高度是我的标题栏高度 - 您可能需要稍微调整它。

Answer 2

我认为您正在寻找一个粘性标题。这是我编写的代码，可以帮助您入门。我假设您将有更多包含内容的部分。

$(window).scroll(function() {
  if ($(this).scrollTop() > 1) {
    $('header').addClass("sticky");
  } else {
    $('header').removeClass("sticky");
  }
});

body {
  height: 2000px;
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  background: #ccc;
  padding: 10px;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  transition: all 0.4s ease;
}

a {
  color: #fff;
  text-decoration: none;
}

header.sticky {
  background: #aaa;
}

.content {
  padding-top: 120px;
}

section {
  padding: 100px 0;
}

.container {
  width: 960px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1><a href="#link">Click Here</a></h1> </header>
<div class="container">
  <section class="content" >
 <p>askld f;a jsd;f jasld jf;la ;jsdlkfj ;asd jf;a jsd;lkf jalk;s df;l ;alk sdjf;lajsd fja;s dllf jalksdjf; jas;ldjf ;laj sd;flj a;lsj dfkl; jasdf jkaj s;df lkaj sd;kfj ak;lsd jf;lka jsd;lfj ;ajs dlkf ajskdjf ajs d;klfj aksldj</p>
   <p>askld f;a jsd;f jasld jf;la ;jsdlkfj ;asd jf;a jsd;lkf jalk;s df;l ;alk sdjf;lajsd fja;s dllf jalksdjf; jas;ldjf ;laj sd;flj a;lsj dfkl; jasdf jkaj s;df lkaj sd;kfj ak;lsd jf;lka jsd;lfj ;ajs dlkf ajskdjf ajs d;klfj aksldj</p>
   <p>askld f;a jsd;f jasld jf;la ;jsdlkfj ;asd jf;a jsd;lkf jalk;s df;l ;alk sdjf;lajsd fja;s dllf jalksdjf; jas;ldjf ;laj sd;flj a;lsj dfkl; jasdf jkaj s;df lkaj sd;kfj ak;lsd jf;lka jsd;lfj ;ajs dlkf ajskdjf ajs d;klfj aksldj</p>
   <p>askld f;a jsd;f jasld jf;la ;jsdlkfj ;asd jf;a jsd;lkf jalk;s df;l ;alk sdjf;lajsd fja;s dllf jalksdjf; jas;ldjf ;laj sd;flj a;lsj dfkl; jasdf jkaj s;df lkaj sd;kfj ak;lsd jf;lka jsd;lfj ;ajs dlkf ajskdjf ajs d;klfj aksldj</p>
   <p>askld f;a jsd;f jasld jf;la ;jsdlkfj ;asd jf;a jsd;lkf jalk;s df;l ;alk sdjf;lajsd fja;s dllf jalksdjf; jas;ldjf ;laj sd;flj a;lsj dfkl; jasdf jkaj s;df lkaj sd;kfj ak;lsd jf;lka jsd;lfj ;ajs dlkf ajskdjf ajs d;klfj aksldj</p>
  
</section>
<section id="link">
 <img src="http://placehold.it/600x400.jpg" alt="Image" /></section>
</div>

也在codepen上：http://codepen.io/hunzaboy/pen/WoXRRL