melishas19.github.io/script.js at main · melishas19/melishas19.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84


/*
window.addEventListener("scroll", () => {
      const images = document.querySelectorAll(".floating_img");
      const scrollTop = window.scrollY;
      let mql = window.matchMedia("(width >= 1050px)");
      if(mql.matches){
        images.forEach((img) => {
          const rect = img.getBoundingClientRect();
          const offsetTop = rect.top + scrollTop;
          const speed = 0.3;
          const distance = (scrollTop - offsetTop + window.innerHeight / 2) * speed;
          img.style.transform = `translate3d(0, ${distance}px, 0) scale(1)`;
      });
      }
      else{
        images.forEach((img) => {
          img.style.transform = `none`;
        });
      }

    });
*/

const mediaQuery = window.matchMedia('(max-width: 800px)');
const mediaQuery2 = window.matchMedia('(min-width: 800px)');
console.log(mediaQuery2.matches);
let collapse=true;

function handleMenuBar(){
  if (collapse){
    collapse=false;
    document.getElementById("top_nav").style.height="250px";
    document.getElementById("mobile_nav").style.opacity="1";
    document.getElementById("mobile_nav").style.right="0px";
    document.getElementById("mobile_link").style.opacity="1";
    document.getElementById("mobile_link").style.right="0px";
  }
  else{
    collapse=true;
    if(mediaQuery2.matches){
      document.getElementById("top_nav").style.height="90px";
    }
    else{
      document.getElementById("top_nav").style.height="60px";
    }
    document.getElementById("mobile_nav").style.opacity="0";
    document.getElementById("mobile_nav").style.right="-100%";
    document.getElementById("mobile_link").style.opacity="0";
    document.getElementById("mobile_link").style.right="-100%";
  }

}

function handleNavChange(e){
  if (e.matches) {
    collapse=true;
    document.getElementById("top_nav").style.height="90px";
    document.getElementById("mobile_nav").style.opacity="0";
    document.getElementById("mobile_nav").style.right="-100%";
    document.getElementById("mobile_link").style.opacity="0";
    document.getElementById("mobile_link").style.right="-100%";
  }
  else{
    collapse=true;
    document.getElementById("top_nav").style.height="60px";
    document.getElementById("mobile_nav").style.opacity="0";
    document.getElementById("mobile_nav").style.right="-100%";
    document.getElementById("mobile_link").style.opacity="0";
    document.getElementById("mobile_link").style.right="-100%";
  }
}


mediaQuery2.addListener(handleNavChange);
handleNavChange(mediaQuery2);

const menubar= document.getElementById("fa-bars");
menubar.addEventListener("click",handleMenuBar);

document.getElementById("mobile_link").addEventListener("click",handleMenuBar);