schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

script and css to change nav background

Browse Source
This commit is contained in:
Thefeli73 2020-01-15 18:27:44 +01:00
parent 1da0437812
commit e690848eb4
2 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/layout/_nav.scss
View File

@ -4,8 +4,16 @@
#nav { #nav {
@include vendor('transition', ( @include vendor('transition', (
'height #{_duration(transition)} ease', 'height #{_duration(transition)} ease',
'background #{_duration(transition)} ease',
)); ));
height: 80px; height: 80px;
position: fixed;
width: 100%;
background: #f2f2f2;
&.scrolled {
background: #ffffff;
}
> #wrapper { > #wrapper {
margin: auto; margin: auto;

10
src/js/main.js
View File

@ -1,3 +1,4 @@
//toggle menu burger animation
document.getElementById("menuToggle").addEventListener("click", menuToggle); document.getElementById("menuToggle").addEventListener("click", menuToggle);
function menuToggle() { function menuToggle() {
var bars = document.getElementsByClassName('bar'); var bars = document.getElementsByClassName('bar');
@ -5,3 +6,12 @@ function menuToggle() {
bars[i].classList.toggle('active'); bars[i].classList.toggle('active');
} }
} }
//toggle nav backgroundcolor
window.addEventListener('scroll', function() {
if (window.pageYOffset == 0) {
document.getElementById("nav").classList.remove('scrolled');
} else {
document.getElementById("nav").classList.add('scrolled');
}
});