Question

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

这是我的想法：

我会从链接中获取#team（例如：https://kieferorthopädie-dietze.de/praxis/#team/）
然后将#team与容器进行比较，如果容器与链接具有相同的id，我将向主体添加padding-top。
如果用户向上滚动，正文将删除填充顶部。

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

Answer 1

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

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

当然，那是我使用的h4 - 当然，您可以将其替换为您用于跳转的任何容器或元素。高度是我的标题栏高度 - 您可能需要稍微调整一下。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

粘性标题重叠内容

2 个答案: