Skip to content

Instantly share code, notes, and snippets.

@delvinkrasniqi

delvinkrasniqi/Change Navbar in Scroll

Created April 21, 2020 09:26
Show Gist options
  • Save delvinkrasniqi/c5cb411e7cf27443822b3516899a3917 to your computer and use it in GitHub Desktop.
Save delvinkrasniqi/c5cb411e7cf27443822b3516899a3917 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Change Navbar in Scroll
//html
<nav class="navbar navbar-expand-lg navbar-light custom-nav" id="navbari">
//css
.scroll{
background-color: rgba($color: #000000, $alpha: 0.6) !important;
transition: background-color 200ms linear;
}
//script
<script>
window.onscroll = () => {
const nav = document.querySelector('#navbari');
if(this.scrollY <= 10) nav.className = 'navbar navbar-expand-lg navbar-light'; else nav.className = 'navbar navbar-expand-lg navbar-light scroll';
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment