Cr8Code – Creating Stick Navigation Bar with JQuery Part.2

안녕하세요, Cr8CodeCo에 오신 것을 환영합니다

이전 튜토리얼에서는 우리의 헤더와 네비게이션 바 이제 어떻게 행동 할 것인지 결정할 것입니다 첫 번째 부분을 보지 않았다면 링크를 클릭하고 먼저 살펴보십시오 우선, 우리는 네비게이션 바를 고수 할 CSS 클래스를 시작합니다 정상에

이를 위해 위치를 고정 된 0 위 및 0으로 설정했습니다 Javascript와 JQuery에 들어가기 전에 나는 당신이 그들에 대한 기본적인 이해가 필요함을 당신이 알기를 바랍니다 계속 나아 갑시다 우리는 문서 준비 함수를 만드는 것으로 시작하여 우리의 스크립트가 준비가 끝날 때까지 대기하도록 지시합니다 자체 준비가되었습니다

그러면 우리가해야 할 일은 탐색 바 높이를 얻는 것입니다 50 픽셀이지만 탐색 바가 다를 수 있습니다 따라서 JQuery로 얻고 그것에 대해 신경 쓰지 않는 것이 좋습니다 우리는 네비게이션 바를 우리의 페이지에서 유일하기 때문에 그것을 요소 이름으로 사용합니다 우리는 그것을 클래스 나 ID를 부여 할 것이고, 우리는 해쉬를 그 다음 id로 놓거나 클래스를 점령 할 것입니다

타겟팅 이제 페이지가 스크롤되면 캡처 할 것입니다 그렇다면 우리는 우리의 기능을 해고 할 것입니다 이제 탐색 막대의 높이와 일치하도록 스크롤 크기를 가져옵니다 탐색 막대의 높이가 스크롤 크기에서 150을 뺀 값보다 작은 경우 즉, 우리의 탐색 바는 페이지 밖에 있습니다 여기서 150은 헤더의 높이입니다

스크립트를 삽입하지 않으면 탐색 모음이 아직 페이지에있는 동안 스크립트가 작동합니다 애니메이션 아래로 슬라이드를 추가하여 탐색 모음의 높이를 설정하는 이유 0으로 설정합니다 그런 다음 우리가 처음 만들었던 fixnav 클래스를 nav 요소에 추가합니다 그 직후, 우리는 네비게이션 바의 높이를 500 픽셀 안에 다시 애니메이션으로 만들 것입니다 밀리 초로 설정하면 슬라이드 다운 효과가 생성됩니다

정지 기능은 애니메이션이 쌓이지 않도록합니다 우리가 가진 것을 보자 우리의 기능은 잘 작동하고 브라우저에 fixnav 클래스 추가, nav 요소 추가, 탐색 막대의 높이가 스크롤 크기에서 150을 뺀 값보다 작은 경우 탐색 막대가 끈적 거리지 않는 것을 제외하고는 예상대로 작동합니다 이 문제를 해결하기 위해 else 함수를 만들고 브라우저에 fixnav를 제거하라고 지시합니다 탐색 막대의 높이가 스크롤 크기보다 작지 않은 경우 클래스입니다 다시 확인합시다

그것은 훌륭하게 작동하지만 또 다른 문제가 있습니다 스크롤 기능은 탐색 막대가 윗쪽에 붙어 있어도 스크롤 할 때마다 반복해서 실행됩니다 이 버그를 방지하려면 우리는 부울 값을 가진 다른 변수를 생성하고 다른 if 함수를 생성 할 것입니다 'checker'인 새 변수가 true인지 확인합니다 sticky 함수를 실행하고 'checker'변수를 false로 변경하십시오

이것은 체커가 맞지 않는 한 다시 발사하는 것을 막을 것입니다 이거 야 마지막으로 'checker'변수를 다시 true로 변경합니다 사용자가 길 그리고 우리는 잘 가게된다

우리의 스티키 네비게이션 바를 사용할 준비가되었습니다