Shadow navbar on Scroll
Emphasize your navbar by adding a shadow on page scroll for your Webflow site. This effect you can use via interactions although an easier way is to add a simple Javascript snippet instead. The code makes it so that if a user hasn't scrolled then no shadow…
Emphasize your navbar by adding a shadow on page scroll for your Webflow site. This effect you can use via interactions although an easier way is to add a simple Javascript snippet instead. The code makes it so that if a user hasn't scrolled then no shadow will be visible. When a user scrolls your shadow effect will then be added.
How to add it
- Add the Javascript snippet to your closing body tag of custom code
- Update the element ID of main-navigation to your chosen element ID
- You can update settings such as Vertical movement (how far down someone has scrolled), Blur and other effects based on your needs.
The code
Javascript
<!-- Add to closing body tag -->
<script>
let navContent = document.getElementById('main-navigation');
$(window).scroll(function() {
if($(window).scrollTop() > 0) {
navContent.style.boxShadow = '0 1px 0px #e8e9ee';
navContent.style.transition = 'all 0.2s';
} else {
navContent.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)';
navContent.style.transition = 'all 0.2s';
}
});
</script>
