Bootstrap-4目标滚动导航栏类

时间:2017-11-22 10:21:17

标签: javascript bootstrap-4

我正在使用带有bootstrap 4的scrollspy并使其正常工作。但是,我试图在navlink处于活动状态时定位导航栏类。一旦导航链接处于活动状态,我想向导航栏添加一个类,一旦链接未激活,我想删除该类。我已经尝试将我的课程改为bg-light等,但它仍无法正常工作

你能帮帮忙吗?

这是我的HTML。

<nav class="navbar sticky-top d-block p-0 bg-transparent bg-light" id="fnav">
            <div class="navbar nav d-flex justify-content-between p-0">
                <a class="nav-item nav-link active" href="#articles">Articles<span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#schools">Schools</a>
                <a class="nav-item nav-link" href="#refs">References</a>
                <a class="navbar-brand" href="#">NavBar</a>                 
            </div>
</nav>

这是js

$(function() {

"use strict";

var topoffset =150;

//Scrollspy

$('body').scrollspy({
    target: '#fnav .navbar'
    offset: topoffset

});

//Addclass

$('.navbar .sticky-top').on('activate.bs.scrollspy', function () {

var hash = $(this).find('nav-item.active a').attr('href');
if(hash  !== '#articles') {
    $('#fnav nav').addClass('infpage');
} else {
    $('#fnav nav').removeClass('infpage');
}

});

0 个答案:

没有答案