[JQUERY] 페이지 스크롤에서 Active 메뉴 항목을 변경?
JQUERY페이지 스크롤에서 Active 메뉴 항목을 변경?
해결법
-
1.그것은 용기 (보통 창)의 스크롤 이벤트에 결합함으로써 이루어집니다.
그것은 용기 (보통 창)의 스크롤 이벤트에 결합함으로써 이루어집니다.
빠른 예 :
// Cache selectors var topMenu = $("#top-menu"), topMenuHeight = topMenu.outerHeight()+15, // All list items menuItems = topMenu.find("a"), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var item = $($(this).attr("href")); if (item.length) { return item; } }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href='#"+id+"']").parent().addClass("active"); });스크롤 애니메이션을 포함 jsFiddle 행동에서 위를 참조하십시오.
-
2.그냥 내 코드와 스나이퍼 데모 링크를 확인 :
그냥 내 코드와 스나이퍼 데모 링크를 확인 :
// Basice Code keep it $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); // Use Your Class or ID For Selection function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }데모 라이브
$ (문서) .ready (함수 () { $ (문서) CSTE 연구진 ( "스크롤", onScroll); // smoothscroll $ ( 'A [^ HREF = "#"]).의 (함수 (예를 들어'클릭 ') { e.preventDefault (); $ (문서) .OFF ( "스크롤"); $ ( 'A'). 각 (함수 () { $ (이) .removeClass ( '활성'); }) $ (이) .addClass ( '활성'); VAR 대상 = this.hash, 메뉴 = 타겟; $ $ 타겟 (목표) =; $ ( 'HTML, 몸'). 정지 (). 애니메이션 ({ 'scrollTop'. $의 target.offset () 상단 + 2 } 500 '진동', 함수 () { 하면 window.location.hash = 타겟; $ (문서) CSTE 연구진 ( "스크롤", onScroll); }); }); }); onScroll 함수 (이벤트) { VAR scrollPos = $ (문서) .scrollTop (); $ ( '# 메뉴 중심 A'). 각 (함수 () { VAR currLink = $ (이); VAR refElement = $ (currLink.attr ( "HREF")); 경우 (refElement.position (). 가기 <= scrollPos && refElement.position (). 가기 + refElement.height ()> scrollPos) { $ ( '# 메뉴 중심 UL 리 A') removeClass ( "활성."); currLink.addClass ( "능동"); } 그밖에{ currLink.removeClass ( "능동"); } }); } 몸, HTML { 여백 : 0; 패딩 : 0; 신장 : 100 %; 폭 : 100 %; } .menu { 폭 : 100 %; 높이 : 75px; 배경색 : RGBA (0, 0, 0, 1); 위치 : 고정; 배경색 : RGBA (4, 180, 49, 0.6); -webkit-전환 : 모든 0.4s 쉽게; -moz-전환 : 모든 0.4s가 완화; -o 전이 : 모든 0.4s 쉽게; 전환 : 모든 0.4s가 완화; } .light 메뉴 { 폭 : 100 %; 높이 : 75px; 배경색 : RGBA (255, 255, 255, 1); 위치 : 고정; 배경색 : RGBA (4, 180, 49, 0.6); -webkit-전환 : 모든 0.4s 쉽게; -moz-전환 : 모든 0.4s가 완화; -o 전이 : 모든 0.4s 쉽게; 전환 : 모든 0.4s가 완화; } # 메뉴 센터 { 폭 : 980 픽셀; 높이 : 75px; 여백 : 0 자동; } # 메뉴 중심 UL { 마진 : 0 0 0 0; } # 메뉴 중심 UL 리 { 패딩 : 32px 40px; } # 메뉴 중심 UL 리 { 목록 스타일 : 없음; 마진 : 0 0 0 -4px; 표시 : 인라인; } .active는, # 메뉴 중심 UL 리튬 A : 가져가 { 글꼴 - 가족 : '드로이드 산세', 리프; 폰트 사이즈 : 14px; 색상 : #fff; 텍스트 장식 : 없음; 라인 높이 : 50 픽셀; 배경색 : RGBA (0, 0, 0, 0.12); 패딩 : 32px 40px; } ㅏ { 글꼴 - 가족 : '드로이드 산세', 리프; 폰트 사이즈 : 14px; 검정색; 텍스트 장식 : 없음; 라인 높이 : 72px; } #집 { 배경 색상 : # 286090; 높이 : 100vh; 폭 : 100 %; 오버 플로우 : 숨겨진; } #portfolio { 배경 : 회색; 높이 : 100vh; 폭 : 100 %; } # 정보 { 배경 색상 : 블루; 높이 : 100vh; 폭 : 100 %; } #contact { 배경색 : RGB (154, 45, 45); 높이 : 100vh; 폭 : 100 %; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> --->
- 홈
- 포트폴리오 에
- 정보
- 고객에게 연락 에
< "에 대한"DIV ID =>
3.그냥 @Marcus Ekwall의 답을 보완합니다. 이런 식으로 이렇게 만 앵커 링크를 얻을 것이다. 그리고 당신은 당신이 앵커 링크와 일반 사람의 혼합이있는 경우 문제가 발생하지 않을 수 있습니다.
그냥 @Marcus Ekwall의 답을 보완합니다. 이런 식으로 이렇게 만 앵커 링크를 얻을 것이다. 그리고 당신은 당신이 앵커 링크와 일반 사람의 혼합이있는 경우 문제가 발생하지 않을 수 있습니다.
jQuery(document).ready(function(jQuery) { var topMenu = jQuery("#top-menu"), offset = 40, topMenuHeight = topMenu.outerHeight()+offset, // All list items menuItems = topMenu.find('a[href*="#"]'), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var href = jQuery(this).attr("href"), id = href.substring(href.indexOf('#')), item = jQuery(id); //console.log(item) if (item.length) { return item; } }); // so we can get a fancy scroll animation menuItems.click(function(e){ var href = jQuery(this).attr("href"), id = href.substring(href.indexOf('#')); offsetTop = href === "#" ? 0 : jQuery(id).offset().top-topMenuHeight+1; jQuery('html, body').stop().animate({ scrollTop: offsetTop }, 300); e.preventDefault(); }); // Bind to scroll jQuery(window).scroll(function(){ // Get container scroll position var fromTop = jQuery(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if (jQuery(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; menuItems.parent().removeClass("active"); if(id){ menuItems.parent().end().filter("[href*='#"+id+"']").parent().addClass("active"); } }) })기본적으로 내가 대체
menuItems = topMenu.find("a"),으로
menuItems = topMenu.find('a[href*="#"]'),필요가 무엇인지는이 작업을 할 것을 앵커 곳으로 모든 링크와 일치하고, 모든 변경하려면
jsfiddle에 직접보기
4.당신이 JQuery와 3 변경과 같은 코드의 작업에 허용 대답을 원하는 경우 :
당신이 JQuery와 3 변경과 같은 코드의 작업에 허용 대답을 원하는 경우 :
var scrollItems = menuItems.map(function () { var id = $(this).attr("href"); try { var item = $(id); if (item.length) { return item; } } catch {} });또한 해당 ID에 의해 어떤 요소가없는 경우 충돌에서 자바 스크립트 방지하기 위해 시도 - 캐치를 추가했다. 더 그것을 개선 주시기 바랍니다)
from https://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] JQuery와 플러그인을 확장하는 가장 좋은 방법 (0) 2020.10.17 [JQUERY] 어떻게 변경 이벤트에 라디오를 사용 하는가? (0) 2020.10.17 [JQUERY] 여러 요소에 대한 jQuery를 같은 클릭 이벤트 (0) 2020.10.17 [JQUERY] 어떻게 jQuery를에있는 버튼의 텍스트를 변경하려면? (0) 2020.10.17 [JQUERY] 어떻게 jQuery를 사용하지 않도록 텍스트 선택에? (0) 2020.10.17