끈끈한 탐색 - ID를 통해 탐색하면 내용이 뒤에 있습니다.

Question

현재 착륙 페이지 다음에 표시되는 내 끈적한 내비게이션을 코딩 중이며 링크에 ID를 사용하고 있습니다. 또한 ID로 링크를 움직이면 내비게이션이 방문 페이지에서 나머지 콘텐츠로 넘어갈 때 문제가 발생합니다.

문제는 홈 페이지의 링크를 클릭하면 페이지 내용이 탐색 아래에있는 것이 아니라 탐색 뒤로 이동한다는 것입니다. 네비게이션은 전환점 뒤에서는 잘 작동하지만 홈 페이지에서 링크를 클릭하면 내용이 항상 네비게이션 뒤에 있습니다.

웹 사이트는이 링크에서 살고있다 :

#about, #portfolio, #contact{ 
    position:relative; 
    text-align:left; 
    background-color:#141615; 
    width:80%; 
    margin-left:10%; 
    color:#000; 
    line-height:3; 
    height:100%; 
    overflow:hidden; 
    margin-top:100px; 
    padding-top:100px; 
} 

    .fixed { 
     position: fixed; 
     top: 0; 
     height: 100px; 
     width:100%; 
    } 
    /* Navigation Settings */ 
    nav { 
     width: 100%; 
     height: 100px; 
     background: #fff; 
     text-align:right; 
     z-index:2; 
    } 

:

여기

$(document).ready(function(){ 
     $(window).bind('scroll', function() { 
     var navHeight = $(window).height(); 
      if ($(window).scrollTop() > navHeight) { 
       $('nav').addClass('fixed'); 
      } 
      else { 
       $('nav').removeClass('fixed'); 
      } 
     }); 
    }); 

는 CSS입니다 :

여기

<!--Home background--> 
<div id="main-page"></div> 
<div class="main-page"></div> 
    <figure class="wp-caption"> 
     <figcaption class="wp-caption-text"> 
      <div class="slogan"> 
       <h1>Marcin Augustyn</h1> 
       <h2>Web Developer and UX Designer</h2> 
      </div> 
      <div class="about-home"> 
       <h2><a href="#about">About</a></h2> 
      </div> 
     </figcaption> 
    </figure> 


<nav> 
    <ul> 
     <li class="left"><a href="#main-page"><img src="images/logo3.png" alt="Home page background." /></a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</nav> 
<!--Content--> 
    <div id="about"> 
     <h1>About</h1> 
     <p>Etiam sit amet lacinia risus. Donec dapibus ultricies nisi quis pretium. Phasellus ultrices arcu elit, nec pulvinar erat ultricies eget. 
     Mauris finibus odio at nibh facilisis dignissim. Nulla facilisi. Praesent molestie suscipit felis. Mauris pharetra rhoncus libero, non rhoncus 
     risus commodo at. In pharetra, velit in porttitor maximus, sem ante bibendum tellus, vitae feugiat magna eros et mi. Nunc nec velit enim. 
     Phasellus sed gravida dui. Curabitur lobortis aliquam turpis sagittis porta.</p> 
    </div> 

    <div id="portfolio"> 
     <h1>Portfolio</h1> 
     <p>Etiam sit amet lacinia risus. Donec dapibus ultricies nisi quis pretium. Phasellus ultrices arcu elit, nec pulvinar erat ultricies eget. 
     Mauris finibus odio at nibh facilisis dignissim. Nulla facilisi. Praesent molestie suscipit felis. Mauris pharetra rhoncus libero, non rhoncus 
     risus commodo at. In pharetra, velit in porttitor maximus, sem ante bibendum tellus, vitae feugiat magna eros et mi. Nunc nec velit enim. 
     Phasellus sed gravida dui. Curabitur lobortis aliquam turpis sagittis porta.</p> 
    </div> 
    <div id="contact"> 
     <h1>Contact</h1> 
     <p>Etiam sit amet lacinia risus. Donec dapibus ultricies nisi quis pretium. Phasellus ultrices arcu elit, nec pulvinar erat ultricies eget. 
     Mauris finibus odio at nibh facilisis dignissim. Nulla facilisi. Praesent molestie suscipit felis. Mauris pharetra rhoncus libero, non rhoncus 
     risus commodo at. In pharetra, velit in porttitor maximus, sem ante bibendum tellus, vitae feugiat magna eros et mi. Nunc nec velit enim. 
     Phasellus sed gravida dui. Curabitur lobortis aliquam turpis sagittis porta.</p>  
    </div> 

는 JS 코드 : 여기 http://maugustyn.com/

는 HTML입니다

그 문제를 해결하는 방법에 대한 도움을 주시면 감사하겠습니다. 감사.

Answer 1

어떻게 든 scrollTop 오프셋을 조정하십시오. http://codepen.io/sheriffderek/pen/xqKKoj

귀하의 스크롤 애니메이션 필요가 도움이되지만이 방법을 처리하는 방법을 표시해야합니다 : - 어쩌면 더 어쩌면 덜 ...

$('html, body').animate({ 
    scrollTop: target.offset().top - 100 
}, 1000); 

여기에 ~

(function() { // immediatly invoked function expression... same as dom ready I believe 

    var $window = $(window); // cache this so you don't have jQuery look it up every time... 
    var $body = $('body'); // it's not goint to change 
    var $landing = $('.landing'); // it's not goint to change 
    var $header = $('.site-header'); // or this 

    var landingHeight = $landing.outerHeight(); // take into account borders and padding vs height() 
    var headerHeight = $header.outerHeight(); 

    $window.on('scroll', function() { 
     if ($window.scrollTop() > landingHeight) { 
      $body.addClass('fixed-header').css('padding-top', headerHeight); // you can chain these 
     } else { 
      $body.removeClass('fixed-header').css('padding-top', 0);; 
     } 
    }).scroll(); // trigger once to start 


    // scroll - link function here with the added offset - see codepen below 
})(); 

는 것들과 CodePen가 정렬됩니다 오프셋.