粘性標題重疊內容

Question

我找到了這個問題的答案，但它沒有幫助我的情況。這是我的site，當我跳到內容時，頭部被粘滯頭部重疊。

這是我的想法解決它：

1. 我將從鏈接獲得#team（如：https://kieferorthopädie-dietze.de/praxis/#team/）

2. 然後將比較容器#team，如果容器有與鏈接相同的ID，我會添加填充頂部到身體。

3. 如果用戶向上滾動，body將刪除填充頂部。

希望任何人都可以告訴我如何編碼來解決這個問題。提前致謝！

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