스크롤 할 때 탐색에서 현재 섹션이 올바르게 강조 표시되지 않음

나는 이것도 찌르기로 결정했다. 나는 유연성을 염두에두고 이와 같은 것에 접근하고 가능한 한 하드 코딩 된 값을 제거하고 동적 페이지 흐름을 고려하는 것을 좋아합니다. 내 포크에서는 상단 탐색에 연결하려는 패널의 클래스를 사용하는 대신 href 및 패널 ID를 사용하여 해당 일치가 암시하는 링크를 활용합니다.

var navPanels = $();
$('#prod-menu a').each(function() {
    navPanels = navPanels.add($(this.hash));    // easy array of nav panels according to nav items
});

이 방법을 사용하면 추가 클래스없이 탐색 항목과 패널을 간단히 추가하거나 뺄 수 있습니다. 또한 스택에서 그 위에있는 다른 요소로 인해 오프셋이 변경되어 높이가 변경되거나 이동하는 경우 스크롤 할 때 처음부터 offset (). top 값의 배열이 일치하지 않으므로 스크롤시 확인됩니다. 오프셋 검사는 다음과 같습니다.

navPanels.each(function() {
    var $p = $(this)    // current panel in loop

    if ( $( window ).scrollTop() + $('#prod-menu').outerHeight() >= $p.offset().top) { 
        $("#prod-menu ul li").removeClass("sel");
        $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
    }
});

또한 스크립트 전체에서 상단 탐색 높이를 고려하여 섹션이 상단 탐색 아래에서 시작하는보기 가능 영역을지나 스크롤 할 때 탐색 항목이 강조 표시되도록합니다.

이 접근 방식이 수행하지 않는 것은 탐색에 표시하지 않으려는 섹션에 대한 강조 표시를 제거하는 것입니다. 대신 강조 표시되기 전에 탐색을 떠나는 것입니다.

이것은 전체 JS입니다.

$(function() {
    var homeH = $( window ).height(),
        navPanels = $();

    $('#prod-menu a').each(function() {
        navPanels = navPanels.add($(this.hash));    // easy array of nav panels according to nav items
    });

    $( window ).scroll(function() {
        // toggle top menu
        if ( $( window ).scrollTop() < homeH/2) {
            $("#prod-menu ul li").removeClass("sel");
            $("#prod-menu").css("top", ($('#prod-menu').outerHeight()*-1));
        } 
        else {
            $("#prod-menu").css("top", "0");
        };

        // toggle top menu selection
        navPanels.each(function() {
            var $p = $(this)    // current panel in loop

            if ( $( window ).scrollTop() + $('#prod-menu').outerHeight() >= $p.offset().top) { 
                $("#prod-menu ul li").removeClass("sel");
                $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
            }
        });
    });

    // animating anchor link scrolling
    // snippet from css-tricks 
    // css-tricks.com/snippets/jquery/smooth-scrolling
    $("a[href*=#]:not([href=#])").click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top-$('#prod-menu').outerHeight()
                }, 700);
                return false;
            }
        }
    });
});

전체 펜은 여기 : http://codepen.io/anon/pen/MYNmbb

편집 : 나는 지루해서 이것을 확장하기로 결정했습니다. 내비게이션에없는 섹션으로 스크롤 할 때 내비게이션의 강조 표시가 해제되도록하려면 "상단 메뉴 선택 전환"기능을 다음과 같이 변경하여 볼 수있는 영역을 기준으로 패널 하단을 확인합니다.

// toggle top menu selection
navPanels.each(function() {
    var $p = $(this)    // current panel in loop
    var viewTop = $( window ).scrollTop() + $('#prod-menu').outerHeight();
    if (viewTop  >= $p.offset().top) {
        $("#prod-menu ul li").removeClass("sel");
        if ($p.offset().top + $p.outerHeight() > viewTop) { 
            $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
        }
    }
});

그런 다음 내비게이션에없는 섹션으로 스크롤하면 내비게이션의 다른 섹션을 클릭 할 때까지 아무 것도 강조 표시되지 않습니다.

다시 말하지만 전체 Pen은 http://codepen.io/anon/pen/emqWEW에서 볼 수 있습니다.