jQuery 오작동
관련링크
본문
http://changup.newyorkburger.co.kr/index2.php
브라우저 화면 폭을 최대한 좁혀야 정상적으로 화면이 보입니다
모바일일때를 상정하고 페이지 내용을 만들어서 그렇습니다
화면을 스크롤하면 상단 메뉴가 고정되면서 4개의 메뉴가 순차적으로 이미지가 활성화 됩니다
문제1.
페이지 접속하면 첫번째 메뉴의 불켜짐 현상
첫번째 메뉴의 위치는 페이지 2~3번 스크롤해서 내려가야 하는데
페이지 열릴때 첫번째 메뉴의 불이 커집니다
문제2.
화면을 아래로 내려가다가 제일위로 올라가면 4번째 메뉴의 불이 켜집니다
마우스로 화면을 내려가다고 가장 위로 올라가면 거기는 메뉴에 해당하는 세션이 잡혀있지 않기때문에 4개 메뉴 모두 불이 꺼져야 합니다
이런 2가지 문제가 있는데,
이것에 대한 조언 부탁드립니다
답변 2
주신 주소 내의 scrollmenu.js 소스내에
ScrollMenu.prototype.changeActiveMenuItem = function(item) {
//if (!item.classList.contains('active')) {
this.resetActiveMenuItem();
item.classList.add('active');
// }
};
위의 소스를 아래와 같이 고쳐 보세요
ScrollMenu.prototype.changeActiveMenuItem = function(item) {
//if (!item.classList.contains('active')) {
this.resetActiveMenuItem();
//추가된 부분: 시작
if ($(window).scrollTop() > 0) { // 20은 섹션1의 시작점 보다 작게 적절히
item.classList.add('active');
}
//추가된 부분 :끝
// }
};
문제2가 해결되어 완료하게 되었습니다
감사합니다
커피 상품권을 드리고 싶은데 좋아하는 브랜드가 있으신가요?
혹은 베스킨라빈스도 괜찮으시면 그것으로 보내드릴께요
$( 'a' ).removeClass( 'active' );
$(window).scroll(function() {
if ($(window).scrollTop() == 0) {
$( 'a' ).removeClass( 'active' );
}
});
문제1 은 해결되었습니다
페이지 접속할때 첫번째 메뉴가 오버되는 현상은 주신 코드를 넣으니까 해결이 되네요
문제2...
스크롤 내가다가 가장 위쪽까지 화면을 올리면 메뉴4가 오버된 상태입니다
커피 상품권을 드리고 싶은데 좋아하는 브랜드가 있으신가요?
혹은 베스킨라빈스도 괜찮으시면 그것으로 보내드릴께요
댓글을 너무 늦게 봣네요 ㅎ
말씀 감사합니다~~~^^ 추석 잘 보내세요!
