끈적한 헤더 중복 내용

Question

이 질문에 대한 답을 찾았지만 상황에 도움이되지 않습니다. 이것은 내 site입니다. 콘텐츠로 건너 뛸 때 헤더가 끈적한 헤더로 겹쳐집니다.

1. 내가 링크에서 #team를 얻을 것이다 :

   이

   는 그것을 해결하기 위해 내 생각이다 (예 : https://kieferorthopädie-dietze.de/praxis/#team/)

2. 컨테이너가있는 경우 그 다음, 용기와 #team을 비교합니다 링크가있는 이드와 함께, 몸에 패딩 톱을 추가 할 것입니다.

3. 사용자가 위로 스크롤하면 본체가 패딩 윗부분을 제거합니다.

희망이 누구든지이 문제를 해결하기위한 코드 작성 방법을 알려줄 수 있습니다. 미리 감사드립니다!

Answer 1

당신은 순수 CSS에서이 작업을 수행 할 수 있습니다 - 나 자신이 www.cntrl.no/license에 그것을 할 그것은 h4 I입니다,

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

부여 (인덱스의 링크 중 하나를 클릭) 사용 - 당신은 점프하기 위해 당신이 사용하는 컨테이너 나 요소가 무엇이든 대체 할 수 있습니다. 높이는 머리글 높이에 대한 것입니다. 아마도 약간 조정해야 할 것입니다.

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