スティッキーヘッダーオーバーラップコンテンツ

Question

この質問の回答が見つかりましたが、私の状況には役立ちません。これは私のsiteです。コンテンツにジャンプすると、ヘッダーはスティッキーヘッダーでオーバーラップします。

これはそれを修正するために私の考えです：

1. 私はリンク（例：https://kieferorthopädie-dietze.de/praxis/#team/）から#teamを取得するコンテナがある場合

2. はその後、コンテナと#teamを比較しますリンク先のIDが同じであれば、ボディにパディングトップを追加します。

3. ユーザーがスクロールアップすると、ボディがパディングトップを削除します。

誰でもこの問題を解決する方法を教えてください。前もって感謝します！

Answer 1

あなたは純粋なCSSでこれを行うことができます - 私はそれを行う自分自身をwww.cntrl.no/license上（インデックス内のリンクをクリックしてください）

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

は確かに、それはh4のためのIですもちろん、ジャンプするために使用するコンテナや要素を代用することもできます。そして、高さは私のヘッダーバーの高さです - おそらくそれを少し調整する必要があります。

Answer 2

私は粘着性のあるヘッダーを探していると思います。ここに私があなたが始めるのを助けるかもしれないコードを書きました。私はあなたがコンテンツを持つセクションを増やすことを前提としています。

codepenにも

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