置顶 header 重叠内容

Question

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

这是我的修复想法：

我将从 link 获取#team（例如：https://kieferorthopädie-dietze.de/praxis/#team/）
然后会比较#team和container，如果container和link有相同的id，我会在body后面加上padding-top。
如果用户向上滚动，body 将删除 padding-top。

希望有人能告诉我如何编写代码来解决这个问题。提前致谢！

Answer 1

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

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

当然，那是我使用的 h4 - 你当然可以用它代替你用来跳转到的任何容器或元素。高度适合我的 header-bar 高度 - 您可能需要稍微调整一下。

Answer 2

我觉得你在找贴header。这是我编写的代码，可以帮助您入门。我假设您将有更多内容部分。

$(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>

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

置顶 header 重叠内容

Sticky header overlap content

jquery

html

css

menu

sticky