붙일 때 navbar를 중앙에 유지하는 방법?

Question

최근 프로젝트에서 작업 할 때 scroll-then-fix 헤더를 추가하려고했습니다. 나는이 모든 것을 조사했지만 많은 온라인 소스는 다양한 언어의 구버전에 의존하거나 설명되지 않은 '마법의 숫자'에 광범위하게 의존하면서 거의 도움이되지 못했습니다. 결국, 나는 단순히 나 자신을 코드로 결정하고, 생성 된 다음

$(document).ready(function(){ 
    var elementPosition = $('#navbar').offset(); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > elementPosition.top) { 
      $('#navbar').css('position', 'fixed').css('top', '0'); 
     } else { 
      $('#navbar').css('position', 'static'); 
}})}); 

이 가기 네비게이션 바에을 끈적하기 위해 노력하고 있지만이 활성화 될 때마다 대신의 중심 위치를 유지 왼쪽 상단에 메모장 . 내가 바꾸고있는 것은 '위치'와 속성 '상단'을 추가하는 것이므로 갑자기 옆으로 옮길 이유가 없습니다. 나는 당신이 가질 수있는 수정이나 설명을 대단히 감사 할 것입니다.

<div id="navbar"><ul> 
    <li id="activePage"><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Upcoming events </a><li> 
    <li><a href="">Contact Us</a></li> 
    <li><a href="">Contribute</a></li> 
</ul></div> 

과 CSS :

#navbar { 
    background-color: white; 
    z-index: 1; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    text-align: center; 
    width: 100%; 
} 

#navbar li { 
    text-align: center; 
    display: inline; 
} 

#navbar ul #activePage a { 
    color: #cec8c8; 
} 

#navbar li a { 
    color: black; 
    padding: 14px 35px; 
    text-decoration: none; 
    font-family: 'Roboto Slab'; 
    font-size: 25px; 
    text-align: center; 
} 

어떤을 위해 사전에 감사하고 모든 당신이 제공 할 수 있도록 참고로, 여기에 관련 HTML입니다!

Answer 1

문제는 절대적으로 또는 고정 된 위치에있는 요소는 화면의 내용을 내부의 내용으로 만 차지한다는 것입니다. 따라서 요소는 스크린의 100 % 너비를 차지하는 기본 블록 요소에서 내부의 내용에서 필요한 너비 만 차지하는 고정 된 위치 요소로 이동합니다.

이 문제를 쉽게 해결할 수있는 방법은 요소에 left: 0; right: 0;을 추가하여 창 뷰포트의 너비를 지정하는 것입니다.

이 라인을 변경하여

$('#navbar').css('position', 'fixed').css('top', '0'); 

에

$('#navbar').css('position', 'fixed').css({'top':'0','left':'0','right':'0'}); 

당신은 대신 요소에 width: 100%;를 할당 할 수 할 수 있지만 당신은 어떤 박스 모델 문제를 염두 할 필요가 너비가 100 %를 초과하여 확장 될 수있는 패딩이나 테두리를 사용하는 경우에 대비하여 나비가 뷰포트 너비를 벗어나지 않도록하려면 box-sizing: border-box;을 사용하십시오.