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')会将其取出。

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

在你的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");
        }
    });
}

jQuery滚动异常

1 个答案: