我有一个固定的导航栏，主体是可滚动的。我想在不影响滚动功能的情况下在导航栏顶部添加一层，但我的导航栏固定在顶部。我该如何解决这个问题。这是我的代码
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body{
padding-top: 40px;
}
</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>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#feedback">Home</a>
<li><a href="#features">Our Services</a>
<li><a href="#gallery">Gallery</a>
<li><a href="#faq">Faq</a>
<li><a href="#contact">ContactUs</a>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
您可以将内容包装在navbar-fixed-top类中。
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body {
padding-top: 90px;
}
.root {
min-height: 100vh;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<div class="navbar-fixed-top">
<p>I am top of navbar</p>
<!-- Navbar -->
<nav class="navbar navbar-inverse" 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>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#feedback">Home</a>
<li><a href="#features">Our Services</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#faq">Faq</a></li>
<li><a href="#contact">ContactUs</a></li>
</li>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
</div>
<div class="root">
<p>MY HEIGHT IS TOO LONG</p>
</div>
</body>