jquery는 표시 범위를 초과하는 탐색을 screen_jquery 상단으로 자동 수정하는 방법을 구현합니다.

실제로 구현하는 것은 어렵지 않습니다. 먼저, 네비게이션이 표시 범위 내에 있으면 수정할 필요가 없습니다. 내비게이션이 표시 범위를 초과하는 경우, 즉 내비게이션과 화면 상단 사이의 거리가 0보다 작은 경우 화면 상단에 띄우도록 하고, 0보다 큰 경우에는, 복원 작업을 수행하는 방법은 간단합니다. 바

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

$().ready (function(){

//화면 상단에서 탐색 거리
var _defautlTop = $(" #navigator").offset().top - $(window).scrollTop();
//화면 왼쪽으로부터 탐색 거리
var _defautlLeft = $("#navigator").offset( ).left - $(window).scrollLeft();
//탐색 기본 스타일 기록, 초기 스타일 복원 시 필요
var _position = $("#navigator").css('position');
var _top = $("#navigator").css('top');
var _left = $(" #navigator").css('left')
var _zIndex = $( "#navigator").css('z-index');
//마우스 스크롤 이벤트
$(window) .scroll(function(){
if($(this).scrollTop() > _defautlTop){
//IE6에서는 position:fixed를 인식하지 못합니다. position:absolute만 사용하여
if($.browser.msie && $.browser.version=="6.0"){
$("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop) ,'left':_defautlLeft,'z-index':99999})
//지터 방지
$("html,body").css({'Background-image':'url(about :blank)','Background-attachment':'fixed'})
}else{
$("#navigator").css({'position':'fixed','top':0 ,'left':_defautlLeft,'z-index':99999})
}
}else{
$("#navigator").css({'position':_position,'top' :_top,'left':_left,'z-index':_zIndex});
}
});
});


말할 것도 없고, 한 가지 주의할 점은 IE6이 position:fixed를 인식하지 못하므로 position을 사용해야 한다는 것입니다. :absolute를 사용하여 시뮬레이션한 다음 실시간으로 top 값을 계산합니다. 또한 스크롤할 때 지터를 방지하려면 html과 body에 두 가지 스타일을 추가해야 합니다. 특히 "IE6의 버그에 대한 완벽한 솔루션"에 대해 알아볼 수 있습니다. 위치:고정을 지원하지 않습니다."

또 한 가지 주의할 점은 탐색 너비는 고정 값이어야 한다는 것입니다. 고정 및 절대 값은 인식되지 않기 때문에 자동 또는 100%일 수 없습니다. 물론 수동으로 너비를 얻을 수도 있습니다. 탐색 스타일에는 다음과 같은 전제가 있습니다. 원래 탐색 스타일은 위치: 상대를 가질 수 없습니다. 가장 간단한 방법은 탐색 너비를 설정하는 것입니다.

위 코드는 백그라운드에 설정된 HTML 바닥글 코드에 복사할 수 있습니다. 플로팅 탐색 너비에 문제가 있는 경우 제가 방금 수행한 해결 방법을 참조하세요.