我正在尝试创建第一个具有视差效果的网站。我注意到固定的顶部导航栏存在问题-它出现在滚动条的顶部，隐藏的溢出并没有将其隐藏。我尝试将其放入.main-container中，这有点解决了我的问题：它不再位于滚动条的顶部，但是不再固定在顶部。是什么导致此问题？我该如何解决？
HTML：
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg" id="top-navbar">
<a class="navbar-brand" href="#">brand</a>
<button class="navbar-toggler" id='nav-icon' type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href='#1'>link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#2'>link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#3'>link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#4'>link 4</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">link</a>
<a class="dropdown-item" href="#">link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class='main-container'>
<div class="parallax-container">
<div>
<h1>title</h1>
</div>
<a href="#1" id='main-anchor'>
<i class="large material-icons" style="font-size: 5rem" id='goto-icon'>
keyboard_arrow_down
</i>
</a>
</div>
<div id="wrapper" class='content-container'>
<div id="page-content" class="page content">
<span class="anchor" id="1"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="2"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="3"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="4"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
</div>
</div>
</div>
</body>
SCSS
// COLORS
$darker: #212529;
$dark: #35383C;
$gray: #605F5E;
$greenish: #0F5158;
$lightgreen: #21686E;
$blue: #7FA5A6;
$lightblue: #96B5B6;
$alabaster: #F1EBE1;
$gainsboro: #CEE0DC;
// SITE
body {
font-family: sans-serif;
background-color: $darker;
scroll-behavior: smooth;
}
.main-container {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
background-color: $darker;
a {
&:link,
&:visited,
&:hover,
&:active {
color: white;
}
}
}
.content-container {
position: relative;
display: block;
z-index: 1;
background-color: $darker;
min-height: 100vh;
}
.content {
margin: 0 auto;
padding: 75px 0;
}
.parallax-container {
color: white;
left: -9px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
position: relative;
z-index: -1;
height: 100vh;
width: 101vw;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
// NAVBAR
#top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
font-size: 1rem;
z-index: 30;
line-height: 150%;
background-color: rgba(33, 37, 41, 0.1);
padding: 0 2.5vw;
transition: transform 1s .3s ease;
box-shadow: 0 1px 50px -28px $blue;
&.dark {
background: $darker;
}
&.dark-show {
background: $darker;
}
&.scrollUp {
transform: translateY(-100%);
}
* {
color: #bbccdd !important;
font-weight: 500;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 600;
padding: 0;
}
.nav-item {
text-transform: uppercase;
padding: 0 8px;
cursor: pointer;
// &:hover:not(.dropdown) {
// background-color: rgba(33, 37, 41, 1);
// }
a:hover {
color: white !important;
}
}
.nav-link {
margin: 10px 0;
&.active {
color: white !important;
border-bottom: 1px solid white;
}
}
.dropdown-menu {
border-color: $blue;
line-height: 2rem;
background-color: rgba(0, 0, 0, 0.1);
.dropdown-divider {
margin: 0;
border-top: 2px solid black;
}
.dropdown-item:hover {
color: white;
background-color: rgba(33, 37, 41, 0.1);
}
}
.navbar-toggler {
color: $blue;
}
}
// HAMBURGER
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $blue;
border-radius: 3px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 1px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 13px;
}
#nav-icon span:nth-child(4) {
bottom: 0px;
}
#nav-icon.open span:nth-child(1) {
top: 15px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 15px;
width: 0%;
left: 50%;
}
// CONTENT
#page-content {
height: 100vh !important;
padding: 15vh 10vw 5vh 10vw;
margin: 0;
}
.anchor {
display: block;
height: 15vh;
margin-top: -15vh;
visibility: hidden;
}
// MEDIA QUERIES
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#sidebar {
display: none;
}
#page-content {
margin: 0;
}
}
JS：
$(document).ready(function() {
$('#sidebar').css('transform', 'translateX(200px)')
$('#nav-icon').click(function() {
// $(this).toggleClass('open');
$('#top-navbar').toggleClass('dark-show');
});
$('.main-container').scroll(function() {
let pageHeight = $('.main-container').height();
$('#top-navbar').toggleClass('dark', $(this).scrollTop() > pageHeight);
$('section').each(function(i) {
var position = $(document).scrollTop();
var header = $('#top-navbar').outerHeight();
if ($(this).position().top <= (position + header)) {
var top = $(this).position().top;
console.log($(this).position().top <= (position + header));
$(".nav-link.active").removeClass('active');
$(".nav-link").eq(i).addClass('active');
}
})
});
$('.nav-link').on('click', function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
let width = $(window).width();
let height = $(window).height();
if (height > width && height < 1024) {
let position = $('#page-content').scrollTop();
$('.main-container').scroll(function() {
let scroll = $('.main-container').scrollTop();
if (scroll > position) {
$('#top-navbar').addClass('scrollUp');
} else {
$('#top-navbar').removeClass('scrollUp');
}
position = scroll;
});
}
链接到jsfiddle：https://jsfiddle.net/strzesia/fhqok4ym/19/
答案 0 :(得分：0)
您可以在导航栏中使用以下CSS
.nav{
position:absolute;
left:0;
top:0;
}