【发布时间】：2018-03-28 04:08:31
【问题描述】：
我正在尝试使用 Bootstrap 构建网站，但我发现导航栏存在问题。即使我使用“固定顶部”类，只要我向下滚动它就不会停留在顶部。
我认为这是创建页面的幻灯片的相对位置的问题，但我不知道如何解决它，我在网上找不到任何东西。
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
.nav-titolo {
float: left;
text-align: center;
}
.navbar-brand {float:none;}
#titolo {
height: 200px;
font-size: 400%;
font-family: Bree Serif;
}
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Bree Serif;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.back {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
/*
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
*/
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("https://lorempixel.com/640/480/abstract/6/");
z-index:2;
}
#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
}
#slide1:before {
background-image: url("https://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
}
#slide2 {
background-image: url("https://lorempixel.com/640/480/abstract/3/");
z-index:2;
}
#slide3:before {
background-image: url("https://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
}
#slide4 {
background: #222;
}
.navbar{
background:#F97300;
}
.nav-link , .navbar-brand{
color: #f4f4f4;
cursor: pointer;
}
.nav-link{
margin-right: 1em !important;
}
.nav-link:hover{
background: #f4f4f4;
color: #f97300;
}
.navbar-collapse{
justify-content: flex-end;
}
.navbar-toggler{
background:#fff !important;
}
.overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link rel= "stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class = "nav-titolo"><a class="navbar-brand" href="#">Colorizer</a></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#slide1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide4">Section 4</a>
</li>
</ul>
</nav>
<div id="title" class="slide header">
<h1 id = "titolo"> Colorizer </h1>
</div>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img class="back" src="https://lorempixel.com/640/480/abstract/6/">
<img class="back" src="https://lorempixel.com/640/480/abstract/4/">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4