j查询滚动异常

Question

我刚刚在我的页面上添加了平滑滚动，这已添加到我的导航栏中。徽标区域 我想保留滚动效果，但我不希望将活动类添加到该部分。任何人都可以帮忙吗，这是我的代码。

//HTML
<header>
        <nav class="navbar transparent navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="container">
                    <div class="navbar-header">
                        <a id="name-brand" class="navbar-brand" href="#big-image">Logo</a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul id="nav-menu" class="nav navbar-nav navbar-right">
                            <li><a class="link-pad" href="#about">About</a></li>
                            <li><a class="link-pad" href="#projects">Projects</a></li>
                            <li><a class="link-pad" href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

//.JS这是我拥有的jquery，它将向导航栏中的所有链接添加活动类，但是我无法弄清楚如何排除徽标部分。

    $(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
        }, 500, 'swing', function() {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
    $(window).on('load', function() {
        setTimeout(function() {
            $(window).scrollTop(0);
        });
    });
});
function onScroll(event) {
    var scrollPos = $(document).scrollTop();
    $('#nav-menu a').each(function() {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#nav-menu ul li a').removeClass("active");
            currLink.addClass("active");
        } else {
            currLink.removeClass("active");
        }
    });
}
function removeActive() {}

我需要的是单击徽标区域时保持滚动效果，但我不希望添加活动类。

Answer 1

听起来徽标包含在链接<a>标签内，因此您的jquery选择器$('#nav-menu a')会将其拾取。

为了防止将活动类添加到徽标链接中，只需在徽标<a>元素中添加唯一的id="name-brand"属性即可。

在你的jquery中，你可以添加这个来检查元素是否具有你给它的logo_id属性，如果是，不要向它添加活动类：

function onScroll(event) {
    var scrollPos = $(document).scrollTop();
    $('#nav-menu a').each(function() {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#nav-menu ul li a').removeClass("active");
            // Add 'if' statement to prevent active class addition to logo
            if ( !currLink.is("#name-brand") ) {
                currLink.addClass("active");
            }
        } else {
            currLink.removeClass("active");
        }
    });
}