Question

我目前正在使用bootstrap创建一个网站。我在顶部有一个菜单栏，当网站的部分位于时，我想更改特定菜单栏的颜色或背景颜色。例如，菜单之一是呼叫，主页中有一个部分打电话。当人在网页的大约部分时，我想要菜单“约”将变成不同的颜色背景。

我使用数据间谍（滚动）和数据目标（my-navbar）来检查它是否有效，但它无法正常工作。无论如何我可以解决这个问题吗？

P.S。这是我使用它的导航栏部件和正文部件。谢谢！

<!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
	<title>Provision Health & Wellness</title>
	<meta name="description" content="ProvisionHW">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 </head>

 	<style>
 	body {
 		padding-top: 40;
 	}

 	h2 {
 		text-align: center;
 	}

 	</style>
 	

 <body data-spy="scroll" data-target="#my-navbar">

 	<!-- Navbar -->
 	 <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
 	 	<div class="container">
 	 		<div class="navbar-header">
 	 			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
 	 				<span class="icon-bar"></span>
 	 				<span class="icon-bar"></span>
 	 				<span class="icon-bar"></span>
 	 				<span class="icon-bar"></span>
 	 			</button>

 	 			<a href="" class="navbar-brand">Provision Health&Wellness</a>
 	 		</div> <!-- Navbar Header-->

 	 		<div class="collapse navbar-collapse" id="navbar-collapse">
 	 			<ul class="nav navbar-nav">
 	 				<li><a href="#health_product">Health Product</a></li>
 	 				<li><a href="#blog">Blog</a></li>
 	 				<li><a href="#slim_product">Slim Product</a></li>
 	 				<li><a href="#video">Video</a></li>
 	 				<li><a href="#skin_product">Skin Product</a></li>
 	 				<li><a href="#contact_us">Contact us</a></li>
 	 			</ul>
 	 		</div>
 	 	</div> <!-- End Container-->
 	 </nav> <!-- End navbar-->

Answer 1

这是小提琴的工作。

https://jsfiddle.net/5e1n0nhw/1/

这是jQuery跟踪活动部分

$(function() {
$('a.page-scroll').bind('click', function(e) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }
    , 1500, 'easeInOutExpo' //add/remove for smooth scroll
    );
    e.preventDefault();
});
});

不要忘记包含jQuery缓动。

将page-top的id添加到您的body元素，并将href page-top添加到您的徽标，这样您就可以在点击时滚动到顶部。

在要引导分段的所有元素上添加类页面滚动。

将部分标签中的所有部分包裹起来。

现在您可以使用css

设置活动链接的样式

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
color:green;
}

Answer 2

使用这个可以自定义导航栏颜色的真棒工具，并为您提供所需的CSS。

http://work.smarchal.com/twbscolor/

Bootstrap活动菜单栏颜色

2 个答案: