스티커 헤더 스크롤 misfunction

Question

I했습니다이 창 상단에 도달하면 끈적 도착 내 헤더에 다음 코드를 가지고 :

$(function() { 
    var stickyHeaderTop = $('#outer-header').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > stickyHeaderTop) { 
      $('#outer-header').css({ 
       position: 'fixed', 
       top: '-300px' 
      }); 
     } else { 
      $('#outer-header').css({ 
       position: 'static', 
       top: '0px' 
      }); 
     } 
    }); 
}); 

그것은 작동하지만, 콘텐츠 스크롤 상단에 도달하고 끈적수록 일반 스크롤 + 헤더 위에 있었던 div의 높이 (그래서 너무 부드럽게 보이지 않는 너무 큰 도약을 만듭니다.)

Answer 1

CBroe에게 감사드립니다. # 외부 header` 그것이 fixed` '로 설정되어있는 페이지 레이아웃의 나머지 부분에 영향을주지 않는'때문에 이런 일이 발생 물론

$(function() { 
    var stickyHeaderTop = $('#outer-header').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() >= stickyHeaderTop) { 
      $('#outer-header').css({ 
       position: 'fixed', 
       top: '-300px' 
      }); 
      $('#main').css({ 
       position: 'relative', 
       top: '332px' 
      }); 
     } else { 
      $('#outer-header').css({ 
       position: 'absolute', 
       top: '0px' 
      }); 
      $('#main').css({ 
       position: 'relative', 
       top: '332px' 
      }); 
     } 
    }); 
});