Struggling to achieve a transparent Bootstrap 4 sticky navbar that reveals the background color of the following section on initial load. Once the user scrolls past 50px, I want the navbar to smoothly fade to white.
I'm close to getting it right, but the issue is that the subsequent section always appears below the navbar, causing the navbar to display as white all the time. If I absolutely position the next section, it disrupts the entire layout.
Here's my current code snippet:
<nav class="navbar sticky-top navbar-light bg-faded my-nav transparent">
<div class="container">
<a class="navbar-brand" href="#">
<%= t 'website' %>
</a>
</div>
</nav>
<section class="hero-header">
<div class="container">
<h1 class="text-center"><%= t 'website' %></h1>
<h2 class="text-center">Find me in app/views/welcome/index.html.erb</h2>
</div>
</section>
My SCSS styling:
.hero-header {
background-image: linear-gradient(138deg, #4FC3F7 0%, #27D3DD 60%, #00E3C3 100%);
padding: 150px 0 60px 0;
h1, h2 {
color: white;
}
}
@mixin nav-box-shadow($size, $blur) {
-webkit-box-shadow: $size $size $size $size $blur;
-moz-box-shadow: $size $size $size $size $blur;
box-shadow: $size $size $size $size $blur;
}
@mixin nav-transition($ease) {
-webkit-transition: all $ease ease-out;
-moz-transition: all $ease ease-out;
-o-transition: all $ease ease-out;
-ms-transition: all $ease ease-out;
transition: all $ease ease-out;
}
.my-nav {
@include nav-box-shadow(1px, rgba(0, 0, 0, 0.2));
@include nav-transition(0.4s);
}
.transparent {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Coffeescript for functionality:
$(window).scroll ->
if $(document).scrollTop() > 50
$('nav').addClass 'bg-faded'
$('nav').removeClass 'transparent'
else
$('nav').addClass 'transparent'
$('nav').removeClass 'bg-faded'
return
If you have any advice on how to align the section directly under the transparent navbar or suggest alternative approaches, I would greatly appreciate it :)