問題描述

我正在嘗試使用 jQuery 航點更新單頁網站的導航.

I'm trying to update the navigation for a single page website using jQuery waypoints.

我想根據當前視圖中的部分更新導航.使用導航鏈接向下時效果很好.我的問題是，當您嘗試滾動到當前部分上方的部分時，查看活動錨點位于應位于的位置下方.

I want to update the navigation based on the current section in view. It works fine when going down using the navigation links. My problem is when you try to scroll to a section above the current section in view the active anchor is one below where it should be.

請看我的演示.

jQuery

$(document).ready(function(){
        $('section').waypoint(function(direction) {
          thisId = $(this).attr('id');
          $('ul li').each(function(){
            var secondaryID = $(this).attr('class');
            if  ( secondaryID == thisId )
                {
                    $('ul li').removeClass('active');
                    $(this).addClass('active');
                }
            });
    },{offset: '0'});   
}); 
$('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
            }, 500);
            return false;
        }
    }
});

HTML

<ul>
    <li class="test"><a href="#test"></a></li>
    <li class="test2"><a href="#test2"></a></li>
    <li class="test3"><a href="#test3"></a></li>
    <li class="test4"><a href="#test4"></a></li>
    <li class="test5"><a href="#test5"></a></li>
</ul>
<section id="test"></section>
<section id="test2"></section>
<section id="test3"></section>
<section id="test4"></section>
<section id="test5"></section>

更新

我使用兩個具有不同偏移量的航路點函數來實現這一點，但這顯然不是最佳解決方案.

I got this to work using two waypoint functions with different offsets but this is clearly not the best solution.

http://jsfiddle.net/SJkmh/10/

我試圖找到一種在同一函數中指定偏移量的方法(取決于方向)，我使用了一個值為 (1 & -1) 的偏移量變量，但不幸的是它只使用了 +1.

I trying to find a way of specifying offsets from within the same function (depending on direction), I used a variable for offset with values of (1 & -1), but unfortunately it only uses +1.

http://jsfiddle.net/SJkmh/13/

推薦答案

試試這個:你的修改示例

$(document).ready(function(){
        $('section').waypoint(function(direction) {
          var me = $(this); //added
          thisId = $(this).attr('id');
          $('ul li').each(function(){
            var secondaryID = $(this).attr('class');
            if  ( secondaryID == thisId )
                {
                    $('ul li').removeClass('active');

                    //added
                    if(direction==='up'){
                        me = $(this).prev();
                    }

                    //added
                    if(!me.length){
                        me = $(this);
                    }

                    $(this).addClass('active');
                }
            });
    },{offset: '0'});   
}); 

UPD好的，這個例子怎么樣:

想法是:

1) 當我們點擊 section N 上邊框時，向下滾動時，表示活動部分變為 section N + 1.

1) When we hit section N top border, while scrolling down, means active section become section N + 1.

2) 當我們點擊 section N 上邊框時，同時滾動頂部，意味著 section N 變為活動狀態.

2) When we hit section N top border, while scrolling top, means section N become active.

PS.對不起我的英語

Javascript

$(document).ready(function(){
        $('section').waypoint(function(direction) {
            var activeSection = $(this);
            if(direction === 'down'){
                activeSection = $(this).next();
            }
            //activeSection = $(this);
            var sectionId   = activeSection.attr('id');
            $('ul li').removeClass('active');
            $('ul li.' + sectionId).addClass('active');
            console.log(activeSection);
        });
}); 

$('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 - (target.height() / 5)
            }, 500);
            return false;
        }
    }
});

這篇關于單頁導航菜單 - 活動指示器的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！