Question

我一直在尝试利用Bootstrap 4 ScrollSpy在滚动时更改我的活动链接，但是我似乎无法使其正常工作。

我使用的是自定义的Bootstrap 4，其中删除了所有常见的CSS组件，组件和链接到组件的jQuery插件（仍包含ScrollSpy）。

当我最终使ScrollSpy正常工作时，我也很想知道如何选择一种自定义颜色以应用于导航链接！

任何帮助都会很棒，我真的一直在为此努力。

这是我的导航栏HTML：

	$('body').scrollspy({ target: '#navbar' });

    body {
	margin: 0;
	padding: 0;
	width: 1440px;
	font-family: 'Montserrat', sans-serif;
	position: relative;
    }

    .nav-bar {
	margin-left: 485px;
	background-color: transparent;
	margin-top: 20px;
	position: fixed;
	z-index: 99;

    }

    .nav-link {
	text-decoration: none;
	padding-left: 20px;
	color: yellow;
	display: block;

    }

    .nav-bar ul li {
	list-style: none;
	display: inline-block;
    }


    .nav-link:hover {
	color: orange;
    }

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 
  <body data-spy="scroll" data-target="#navbar" data-offset="30">
	<header>
		<nav class="navbar nav-bar" id="navbar" role="navigation">
		<ul class="nav navbar-nav">

			<li><a id="profileNav" href="#profileSection" class="nav-link 
        link1">Profile</a></li>

			<li><a id="educationNav" href="#experienceSection" class="nav-link 
        link2">Education</a></li>

			<li><a id="projectsNav" href="#projectsSection" class="nav-link 
        link3">Projects</a></li>

			<li><a id="contactNav" href="#contactSection" class="nav-link 
        link4">Contact</a></li>

		</ul>
		</nav>

自定义的Bootstrap 4 scrollspy不显示活动的导航链接

0 个答案: