我试图使顶部菜单导航栏在打开主页时透明，并且在开始向下滚动时显示为background color。
Example
这是我的代码：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" id="my-navbar" role="navigation">
<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">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-->
</body>最佳答案
您将需要JS来做到这一点
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});.navbar-custom.top-nav-collapse {
background: black;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-custom navbar-fixed-top" id="my-navbar" role="navigation">
<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">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-->
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo mollis ipsum, id scelerisque enim imperdiet vitae. Proin consectetur eleifend elit at ullamcorper. Vivamus ante purus, auctor sit amet viverra id, mattis sed enim. Aliquam bibendum dignissim odio quis pulvinar. Cras ultricies orci est. Pellentesque vitae tellus ante. Phasellus vitae lacus vitae diam euismod rhoncus nec nec risus. Donec sagittis vel sapien et suscipit. Quisque tempus justo id vulputate ultricies. Maecenas libero neque, efficitur volutpat aliquam dignissim, pellentesque non orci. Donec vulputate tincidunt tellus, feugiat eleifend ex molestie eu. Proin at odio et est suscipit ultrices quis id orci. Vestibulum ac hendrerit est. Ut ante nisi, vehicula a tristique et, ultricies vitae augue.
Proin in dolor a ex auctor posuere. Donec commodo ornare orci, eu tempus ante pulvinar non. Aenean mauris neque, malesuada sit amet mi in, cursus accumsan nisi. Duis ullamcorper gravida tortor, sit amet tempus ex imperdiet id. Pellentesque eget elit vel ex tempus luctus et id sapien. Fusce massa augue, pharetra vel dictum nec, lobortis eu neque. Nunc condimentum tempus imperdiet. Nullam in elit et dolor lobortis pretium vitae in odio. Nullam id ornare justo.
Proin eget varius est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla lectus elit, imperdiet id pulvinar a, ullamcorper id est. Nunc pharetra tincidunt ex, a luctus elit eleifend eget. Cras euismod gravida urna sed gravida. Morbi bibendum, nibh vitae rutrum finibus, est nibh tincidunt augue, eu dignissim neque enim iaculis urna. Ut quis tortor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque pharetra efficitur libero, eu tincidunt magna. In hac habitasse platea dictumst. Proin eget laoreet mi. Donec rutrum lectus sit amet leo faucibus tincidunt. Suspendisse potenti. Sed vehicula vitae leo nec cursus. In quam nibh, blandit at ante et, aliquet interdum lacus. Donec id varius libero, sollicitudin elementum orci. Suspendisse viverra suscipit ligula a suscipit.
Fusce sit amet metus gravida, mollis metus quis, consectetur erat. Aliquam rhoncus semper hendrerit. Vivamus vitae lectus diam. Suspendisse sit amet lacinia arcu. Donec tempus semper dolor eget lacinia. Cras eleifend aliquam accumsan. Duis nec nisi pellentesque, iaculis tortor eu, laoreet velit. Nam non diam semper, iaculis risus lobortis, tristique leo. Sed et elit non mi sollicitudin suscipit ut in tortor. </div>
</body>