JS는 탐색 모음 호버 효과(계속 2)_javascript 기술을 구현합니다.

[JS 구현 탐색 모음 가리키기]
[JS 구현 탐색 모음 가리키기(계속)]

이 페이지를 Jquery로 다시 작성한 후 원래 방법에는 여전히 여러 가지 문제가 있습니다.

1. 우선 Js 코드가 중복되고 탐색 모음의 탭이 js를 사용하여 하이퍼링크 대신 점프를 구현합니다.

2. 내비게이션 바 자체는 고정으로 배치되어 있지만 가로 중앙에 설정되어 있지 않고 대신 JS에서 왼쪽 값이 중앙에 위치하도록 변경됩니다.

문제 2에서는 브라우저 창의 크기가 변경되면 브라우저의 div 위치가 변경되어 페이지의 div를 통해 고정된 div를 동적으로 수정할 수 없게 됩니다. 찾을 수 있는 탐색 모음입니다.

최종 코드 변경 사항은 다음과 같습니다.

test.html

코드 복사 코드는 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

//페이지의 탐색 표시줄 원래 위치 기록

var naviga_offsetTop = 0

//탐색 표시줄을 상단에 올리기
function naviga_stay_top(){
// 스크롤 거리 가져오기
var scrollTop = $(document).scrollTop()
//스크롤 거리가 상단에서 원래 네비게이션 바까지의 거리보다 큰 경우
//내비게이션 직접 수정 시각적 영역 상단의 막대
if( scrollTop > naviga_offsetTop ){
$("#nav").css({"top": "0px"})
} else {
//스크롤 거리가 작은 경우 원래 탐색 막대와 상단 사이의 거리를 확인한 다음 탐색 막대의 위치를 ​​다시 계산합니다.
$("#nav").css({"top": naviga_offsetTop - scrollTop "px"});
}
}

function onload_function(){
//초기 탐색 표시줄 높이 기록
naviga_offsetTop = $("#nav ").attr("offsetTop");

//Tie 고정 스크롤 및 마우스 이벤트
$(window).bind("scroll", naviga_stay_top);
$(window).bind ("mousewheel",naviga_stay_top);
$(document).bind(" scroll", naviga_stay_top);
$(document).bind("mousewheel",naviga_stay_top)
}
🎜>$(document).ready( onload_function );


test.css: 탐색 클래스 스타일에 주의

복사 코드 코드는 다음과 같습니다.

div.main{
너비: 800px;
배경: #CCC;
여백: 10px 자동 0
위치: 상대; >div.content{
너비: 800px;
배경: 노란색;
여백: 10px 자동 0;

div.navigation 🎜>폭: 800px;
높이: 40px;
여백: 0
위: 400px;
위치: 고정;
여백-왼쪽:-400px;
}

div.tab{
너비: 195px;
높이:
배경: 파란색; left;
margin-left: 5px;
}


요약:

이 문제의 원인은 CSS의 레이아웃 위치 지정에 익숙하지 않기 때문입니다.

이 방법으로 고정 위치 요소를 배치할 수 없기 때문에 탐색 모음 div를 가로 중앙에 설정하려면 margin 0 auto;를 전달할 수 없습니다.

여백이 0인 요소는 자동으로 위치를 고정할 수 없으며 해당 상위 요소는 고정 너비를 가져야 합니다.

그렇다면 고정 위치 요소를 수평으로 중앙에 배치하는 방법은 무엇일까요?

기준: 왼쪽: 50%, 요소의 가장 왼쪽 지점을 상위 요소 너비의 중간점과 정렬한 다음 margin-left 사용: [요소 너비의 1/2]px ; 이 요소를 정렬하려면 너비를 일반적으로 왼쪽으로 이동하여 이 요소를 중앙에 배치합니다.