jQuery页面滚动不会将导航栏href更改为活动类

Question

我有一个单页网站。当我向下滚动时，我希望我的（固定）导航栏链接在到达该特定 div 的位置时将状态更改为活动。

我使用了jQuery，但它不起作用。这是我的代码：

// SMOOTH SCROLLING PAGES

$(document).ready(function () {
$(document).on("scroll", onScroll);

//smoothscroll
$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('a').each(function () {
        $(this).removeClass('active');
    })
    $(this).addClass('active');

    var target = this.hash,
        menu = target;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top+2
    }, 800, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
  });
});

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('main-navigation a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('main-navigation ul li a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
  });
};

这是我的 HTML：

<nav id="main-navigation">
  <ul>
    <li class="active"><a href="#site-main">Home</a></li>
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <li><a href="#d">D</a></li>
  </ul>
</nav>
<div id="a">DIV Alpha</div>
<div id="b">DIV Bravo</div>
<div id="c">DIV Charlie</div>
<div id="d">DIV Delta</div>

平滑滚动效果很好，但是当我从 div #d 向上滚动时，导航栏 li 的活动状态不会改变。

Answer 1

在这里，我为你准备了小提琴，我希望它是你想要的 - http://jsfiddle.net/skyr9999/dpuvcj5w

<div class="content">
    <div id="site-main">DIV Home</div>
    <div id="a">DIV Alpha</div>
    <div id="b">DIV Bravo</div>
    <div id="c">DIV Charlie</div>
    <div id="d">DIV Delta</div>
</div>

<nav id="main-navigation">
    <ul>
        <li><a class="menuitem" href="#site-main">Home</a></li>
        <li><a class="menuitem" href="#a">A</a></li>
        <li><a class="menuitem" href="#b">B</a></li>
        <li><a class="menuitem" href="#c">C</a></li>
        <li><a class="menuitem" href="#d">D</a></li>
    </ul>
</nav>

js

$(document).ready(function () {

    $('a[href^="#site-main"]').addClass('active');

//smoothscroll
    $('.menuitem').on('click', function (e) {
        e.preventDefault();
        //  $(document).off("scroll");
        var athis = this;
        var target = this.hash,
                menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top + 2
        }, 800, 'swing', function () {
            window.location.hash = target;
            $('.menuitem').removeClass('active');
            $(athis).addClass('active');

        });    
    });    

    $(window).scroll(function (event) {
        var scrollPos = $(document).scrollTop();
        if (scrollPos === 0)
        {
            $('a[href^="#site-main"]').addClass('active');
            return;
        }    
        $('.menuitem').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('.menuitem').removeClass("active");
                currLink.addClass("active");
            } else {
                currLink.removeClass("active");
            }
        });    
    })    
});

因为你没有包含任何 css，所以我即兴创作了一点，但看起来效果很好。

css

#a,#b,#c,#d,#site-main { height: 400px;}
#main-navigation {
    position: fixed;
    top: 0px;
    right:10px;        
}

#main-navigation ul li {
  display: inline;
}

.active {
  background: #f00;
}

更新 1 我更新代码以匹配小提琴现在它会在您滚动到项目时更改菜单项选择

Answer 2

您必须使用列表项进行循环，并使用 # 表示法更正 id 选择器：

$('#main-navigation li').each(function () { //<---correct id selector
    var currLink = $(this);
    var refElement = $(currLink.find('a').attr("href")); //<---find the anchor here
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#main-navigation ul li').removeClass("active"); //<---and here
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});

Answer 3

你可以使用这个很酷的小插件来实现这个 https://github.com/davist11/jQuery-One-Page-Nav

当您在特定的 div 或部分时，它将添加当前类 希望这个帮助:)

Answer 4

替换

$('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active');

与

$('a').each(function () {
    $(this).parent().removeClass('active');
})
$(this).parent().addClass('active');

完整代码：

$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");

$('a').each(function () {
    $(this).parent().removeClass('active');
})
$(this).parent().addClass('active');

var target = this.hash,
    menu = target;
$target = $(target);
$('html, body').stop().animate({
    'scrollTop': $target.offset().top+2
}, 800, 'swing', function () {
    window.location.hash = target;
});

});

不需要onScroll函数