테스트 사이트 - 개발 중인 베타 버전입니다

jquery 질문 드립니다! 채택완료

nanati 7년 전 조회 4,049

http://bookmark.weblike.jp/fes/" target="_blank">우선 테스트 사이트는 요깁니다.

 

제가 어려워 하고 있는 부분은 메뉴(네비게이션)부분인데요~

 

HOME ABOUT LINEUP TIMETABLE ACCESS

 

위와 같은 메뉴가 있구요, 원페이지 사이트입니다.

현재 http://bookmark.weblike.jp/fes/common/js/waypoints.js" target="_blank">waypoint.js라는 js를 이용중입니다.

 

원하는 내용은 

첫 화면에서는 HOME에 current가 붙어있구요.

스크롤 해서 각 영역으로 이동하면 HOME에 붙은 current가 remove되면서

해당영역의 메뉴에 current가 붙도록 하고 싶습니다.

 

그런데 제가 뭘 잘못 기입했는지, HOME에 붙여놓은 current가

아직 스크롤도 안했는데 첫 화면에서부터 remove됩니다.

스크롤 했을 때 각 영역에서는 제대로 current가 붙습니다. (첫 화면만 문제..ㅠ)

여기저기 수정을 해 보았지만 제 수준에서는 어려워서 질문드립니다. 

추가한 js내용은 아래와 같습니다.  자세한 내용은 http://bookmark.weblike.jp/fes/" target="_blank">테스트 페이지에서 확인 부탁드립니다...

 

</p>

<p>    /*----------------------------------------------------*/

    /* 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');

            }

        }

    });

    </p>

<p>

 

설명이 충분히 되었는지 모르겠네요...

읽어주셔서 감사합니다!!!

잘 부탁드립니다.

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
j
7년 전

<section class="main_visual twelve">

=>

<section id="home" class="main_visual twelve">

이렇게 한 번 해보세요 

섹션 아이디를 못 불러오는 것같아요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

n
nanati
7년 전
home id가 body에 붙어있어서 그랬군요 ㅠ ㅠ~
... 이렇게 해결하고 나면 제가 왜 이렇게 바보 같은지 ㅎㅎㅎ
정말 감사합니다!!
j
janedoe
7년 전
작업하다보면 작업자에겐 안보여도 제삼자들에겐 보이는 것들이 있쟎아요 ㅋㅋㅋ 해결되었으니 다행이네요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인