jquery 질문 드립니다!
본문
제가 어려워 하고 있는 부분은 메뉴(네비게이션)부분인데요~
HOME ABOUT LINEUP TIMETABLE ACCESS
위와 같은 메뉴가 있구요, 원페이지 사이트입니다.
현재 waypoint.js라는 js를 이용중입니다.
원하는 내용은
첫 화면에서는 HOME에 current가 붙어있구요.
스크롤 해서 각 영역으로 이동하면 HOME에 붙은 current가 remove되면서
해당영역의 메뉴에 current가 붙도록 하고 싶습니다.
그런데 제가 뭘 잘못 기입했는지, HOME에 붙여놓은 current가
아직 스크롤도 안했는데 첫 화면에서부터 remove됩니다.
스크롤 했을 때 각 영역에서는 제대로 current가 붙습니다. (첫 화면만 문제..ㅠ)
여기저기 수정을 해 보았지만 제 수준에서는 어려워서 질문드립니다.
추가한 js내용은 아래와 같습니다. 자세한 내용은 테스트 페이지에서 확인 부탁드립니다...
/*----------------------------------------------------*/
/* Highlight the current section in the navigation bar
------------------------------------------------------*/
var sections = $("section");
var navigation_links = $("#nav a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('#nav a[href="#' + active_section.attr("id") + '"]');
navigation_links.parent().removeClass("current");
active_link.parent().addClass("current");
},
offset: '25%'
});
/*----------------------------------------------------*/
/* Fade In/Out Primary Navigation
------------------------------------------------------*/
$(window).on('scroll', function() {
var h = $('.main_visual').height();
var y = $(window).scrollTop();
var nav = $('#nav');
if ((y > h * .20) && (y < h) && ($(window).outerWidth() > 767)) {
nav.fadeOut('fast');
} else {
if (y < h * .20) {
nav.removeClass('opaque').fadeIn('fast');
} else {
nav.addClass('opaque').fadeIn('fast');
}
}
});
설명이 충분히 되었는지 모르겠네요...
읽어주셔서 감사합니다!!!
잘 부탁드립니다.
답변 1
<section class="main_visual twelve">
=>
<section id="home" class="main_visual twelve">
이렇게 한 번 해보세요
섹션 아이디를 못 불러오는 것같아요
home id가 body에 붙어있어서 그랬군요 ㅠ ㅠ~
... 이렇게 해결하고 나면 제가 왜 이렇게 바보 같은지 ㅎㅎㅎ
정말 감사합니다!!
작업하다보면 작업자에겐 안보여도 제삼자들에겐 보이는 것들이 있쟎아요 ㅋㅋㅋ 해결되었으니 다행이네요
답변을 작성하시기 전에 로그인 해주세요.
