I am having a problem with my sticky navbar. After scrolling past the header/100vh I want the navbar to be sticky and not stutter.
I have got it be sticky after the header/100vh using jQuery but when you see on jsfiddle it removes the div above the about section and makes it sticky which causes the stutter.
I want the div to stay so it wont cause the issue and will be smoother.
Thanks
View on jsfiddle: https://jsfiddle.net/2v18er30/24/
<body>
<section id="home" class="hero hero-gradient is-primary is-fullheight">
<div class="hero-head m-t-md">
<header class="navbar">
<div class="container">
<div class="navbar-brand">
<a href="index.html">
<img src="img/logo/logo-white-50x50.png" alt="logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroC" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a href="#home" class="navbar-item uppercase has-text-weight-bold is-hidden-desktop">
HOME
</a>
<a href="#about" class="navbar-item uppercase has-text-weight-bold is-hidden-desktop">
ABOUT
</a>
<a href="#skills" class="navbar-item uppercase has-text-weight-bold is-hidden-desktop">
SKILLS
</a>
<a href="#work" class="navbar-item uppercase has-text-weight-bold is-hidden-desktop">
WORK
</a>
<a href="#" class="navbar-item uppercase has-text-weight-bold is-hidden-desktop">
BLOG
</a>
</span>
</div>
</div>
</div>
</header>
</div>
<div class="hero-body">
<div class="container has-text-centered is-family-secondary-serif">
<img src="img/avatars/avatar-placeholder2.png" alt="illustration of me">
<h1 class="title is-3 is-uppercase m-t-lg has-text-weight-normal">
Lorem Ipsum
</h1>
<h2 class="subtitle is-size--2 is-uppercase has-text-weight-bold">
Lorem Ipsum
</h2>
<div class="icon_animate">
<a href="#about" class="is-size-4">
<i class="fas fa-angle-double-down"></i>
</a>
</div>
</div>
</div>
</section>
<nav>
<header class="navbar is-hidden-mobile is-hidden-tablet-only">
<div class="container">
<div class="navbar-brand">
<a href="#home">
<img class="m-t-sm" src="img/logo/logo-color-50x50.png" alt="logo">
</a>
</div>
<div id="navbarMenuHeroC navScroll" class="navbar-menu">
<div class="navbar-end">
<a href="#home" class="navbar-item uppercase has-text-weight-bold m-r-lg">
HOME
</a>
<a href="#about" class="navbar-item uppercase has-text-weight-bold m-r-lg">
ABOUT
</a>
<a href="#skills" class="navbar-item uppercase has-text-weight-bold m-r-lg">
SKILLS
</a>
<a href="#work" class="navbar-item uppercase has-text-weight-bold m-r-lg">
WORK
</a>
<a href="#" class="navbar-item uppercase has-text-weight-bold">
BLOG
</a>
</div>
</div>
</div>
</header>
</nav>
<section id="about" class="section has-background-white-ter">
<div class="container has-text-left">
<div class="columns is-vcentered">
<div class="column is-7">
<div class="content p-r-xxl">
<h2 class="title is-2 has-text-weight-bold is-family-secondary-serif">Lorem Ipsum</h2>
<p>MLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.
<br>
<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.Lorem Ipsum is simply dummy text of the printing and
<br>
<br>Lorem Ipsum is simply dummy text of the printing and typesetti
</p>
</div>
</div>
<div class="column is-6">
<figure class="image is-4by3">
<img src="img/avatars/ds1-about.png" alt="photo of myself">
</figure>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="section">
<div class="container">
<div class="columns">
<div class="column is-mobile">
<h2 class="title has-text-centered m-t-xl m-b-xl has-text-weight-bold is-family-secondary-serif is-size-1">Skills</h2>
</div>
</div>
<div class="columns">
<div class="column is-one-third is-mobile m-b-xxl">
<i class="fas fa-pencil-ruler is-horizontal-center is-size--2 is-primary m-b-lg"></i>
<h3 class="subtitle has-text-centered has-text-weight-bold">UI/UX Design</h3>
<p class="has-text-centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="column is-one-third is-mobile m-b-xl">
<i class="fas fa-paint-brush is-horizontal-center is-size--2 is-primary m-b-lg"></i>
<h3 class="subtitle has-text-centered has-text-weight-bold">Web Design</h3>
<p class="has-text-centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="column is-one-third is-mobile m-b-xl">
<i class="fas fa-code is-horizontal-center is-size--2 is-primary m-b-lg"></i>
<h3 class="subtitle has-text-centered has-text-weight-bold">Front-End Development</h3>
<p class="has-text-centered">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
</div>
</div>
</section>
You can either set position: sticky
, which would solve the "stuttering" or you create a placeholder for your navbar when it's sticky I've provided an example below.
$(document).ready(function(){
// Even when the window is resized, run this code.
$(window).resize(function(){
// Variables
var windowHeight = $(window).height();
// Find the value of 90% of the viewport height
var onehundredpercent = 1 * windowHeight;
// When the document is scrolled ninety percent, toggle the classes
// Does not work in iOS 7 or below
// Hasn't been tested in iOS 8
$(document).scroll(function(){
// Store the document scroll function in a variable
var y = $(this).scrollTop();
// If the document is scrolled 90%
if( y > onehundredpercent) {
// Add placeholder
if (!$('nav').hasClass('sticky')) {
$('nav').after('<div class="placeholder" style="height:' + $('nav').outerHeight() + 'px"></div>')
}
// Add the "sticky" class
$('nav').addClass('sticky');
} else {
// Else remove it.
$('nav').next('.placeholder').remove();
$('nav').removeClass('sticky');
}
});
// Call it on resize.
}).resize();
});
body {
margin: 0;
padding: 0;
}
header {
background-color: orange;
min-height: 100vh;
}
nav {
background-color: red;
width: 100%;
height: 40px;
}
section {
background: green;
min-height: 300px;
}
.sticky {
position: fixed;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Hello World
</header>
<nav>
I'm a navbar
</nav>
<section>I'm a section</section>
<section>I'm a section</section>
<section>I'm a section</section>