I am currently in the process of developing a website using Bootstrap 4 and jQuery. I am trying to implement a header that reduces in size and adds a shadow effect as the user scrolls down the page. Although I have written some code that is partially working, I am not achieving the seamless transition I desire, and the shadow effect is not consistent.
Challenge:
- The header and logo should shrink while scrolling down. - A shadow should be displayed under the header when scrolling. - The transition should be smooth, but mine appears choppy.
Below is the HTML, CSS, and JavaScript code I have been working on:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<h6 id="logo" class="display-7 font-weight-bold text-dark">
Mahyar<br>ART<br>GALERIE
</h6>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS:
#logo {
font-size: 2.5rem;
transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out;
padding: 10px 0;
}
.shrink #logo {
font-size: 1.5rem;
padding: 5px 0;
}
.navbar {
transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
padding: 20px 0;
}
.shrink .navbar {
padding: 10px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
JavaScript:
#logo {
font-size: 2.5rem;
transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out;
padding: 10px 0;
}
.shrink #logo {
font-size: 1.5rem;
padding: 5px 0;
}
.navbar {
transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
padding: 20px 0;
}
.shrink .navbar {
padding: 10px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
My Concern:
The transition is not as smooth as I would like, particularly on slower devices. At times, the shadow effect under the header does not display correctly or flickers. What I've Tried:
I have made adjustments to the transition timing but still notice choppiness. I have tested on various browsers, but the shadow problem persists. Question: How can I achieve a smoother transition and ensure the shadow effect is consistent across different devices and browsers?