Cr8Code – Creating Stick Navigation Bar with JQuery Part.1

안녕하세요 여러분, 오늘 우리는 헤더를 만들 것입니다 그리고 그것과 함께 끈적 거리는 탐색 바는 우리가 가고있는 누구나의 안에서 첫번째로 시작해도 우리 몸의 요구 조건을 정하다

페이지를 스크롤 할 수 있도록 높이를 300 뷰포트 높이로 설정하여 if 끈적 거리는 탐색 바가 이제 우리가 HTML 헤더를 만들려고 노력하고 있습니다 요소와 헤더 이미지 헤더를 시작해 보겠습니다 당신 색상 선택 도구에서 배경색을 선택하여 복사하고 붙여 넣습니다 당신 헤더 표시를 인라인 블록으로 설정해야합니다 이미지 마진을 최고의 가치로 만들기 위해 마진 상위를 재배치해야합니다

여백이 지나면 브라우저는 먼저 10 픽셀을 렌더링합니다 여백 다음 autovalue하고 모든 여백을 만들 것입니다 이제 자동으로 가자 네비게이션 요소를 만든 다음 ul 및 Li 요소를 만드는 탐색 모음 내부 그것들을 정리하고 스타일링하러 가자 다시 색상 선택 도구를 열어 색상을 얻습니다 우리는 마진과 패딩을 0으로 설정하려고합니다 자동으로 여백과 패딩이 생깁니다

숫자 나 점들이 나타날 것이므로 list-style은 none이어야합니다 그렇지 않은 경우 4 개가 있기 때문에 Li 폭을 25 %로 설정합니다 당신이 더 많거나 적다면 100을 당신의 일라이어스 수로 나눈 다음 그들에게 왼쪽에있는 것들은 수평으로 배열 할 수있게 해준다 요소와 스타일은 우리가 다른 색상을 얻기를 원한다는 호버 효과입니다 전환 효용으로 마우스를 가져갈 때 당신

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로 변경합니다 사용자가 길 그리고 우리는 잘 가게된다

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