Why does my navbar appear on top of scrollbar?
Question
I'm trying to create my first website with parallax effect. I noticed a problem with my fixed top navbar - it appears on top of the scrollbar and overflow hidden doesn't hide it. I've tried to put it into.main-container and it kinda solves my problem: it's not on the top of scrollbar anymore, however, it stops being top fixed. What causes this problem? How can I fix it?
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;
});
}
Link to jsfiddle: https://jsfiddle.net/strzesia/fhqok4ym/19/
2 answers
solution1
0 2019-05-29 12:14:36
You can use following css for navbar
.nav{
position:absolute;
left:0;
top:0;
}
solution2
0 2022-08-11 04:45:31
I had the same problem while I was using a Bootstrap template from a teacher. I found out the problem was this line:
overflow-x: hidden;
I just removed and it solved the problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why does my custom scrollbar not show in browser?
Why wont my sprite appear on top of my background?
Why are my navbar options/buttons stacking on top of each other?
Why is it that my favicon does not appear in Firefox and IE?
Why does my data not appear on the table?
Why does it appear that my Javascript code is a comment?
Why does my data appear in the console 4 times?
my navbar has a scrollbar for some reason?
Why does my paypal minicart hide behind my navbar?
Why does my Navbar interfere with my Stripe token creation?
Related Tags