jQuery 메뉴는 스크롤 막대를 사용하여 위치 지정 모드로 변경됩니다(브라우저 상단에 고정)_jquery

직접 작성해 보았습니다.

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

$(function () {
//위치할 요소와 브라우저 상단 사이의 거리를 가져옵니다
var navH = $(".nav").offset().top
//스크롤 막대 event
$(window ).scroll(function(){
//스크롤 막대의 슬라이딩 거리 가져오기
var scroH = $(this).scrollTop();
//슬라이딩 스크롤 막대의 거리는 탐색에서 위치가 지정된 요소의 거리보다 크거나 같습니다. 컨테이너 상단으로부터의 거리는 고정되어 있고, 그렇지 않으면 고정되지 않습니다.
if(scroH>=navH){
$ (".nav").css({"position":"fixed","top":0 ,"left":"50%","margin-left":"-200px"})
} else if(scroH$(".nav").css({" position":"static","margin":"0 auto"})
}
})
})

주요 개념
　1. 이 때 요소가 가시 영역에 들어갔다가 가시 영역을 떠난 후 위치 지정 방법이 변경됩니다.
　2. 요소가 브라우저 상단의 원래 높이로 돌아오면 위치 지정 방법을 복원합니다. l
온라인 데모: http://demo.jb51.net/js/2012/myfix/
데모 다운로드: http://www.jb51.net/jiaoben/45053.html