Wyłączenie javascriptu po zmniejszeniu szerokości strony

0

Jest możliwość wyłączenia tego kodu, gdy strona zmniejszy szerokość do mniej niż 775px? (kod zmniejsza wysokość nawigacji, ale uniemożliwia to zrobienie wersji mobilnej).

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 40 ||                   
    document.documentElement.scrollTop > 40) {
    document.getElementById("nav").style.height = "60px";
    document.getElementById("nav").style.backgroundColor = "rgb(32, 32, 32, 0.95)";
    document.getElementById("logo").style.width = "200px";
    document.getElementById("nav2.1").style.fontSize = "18px"; 
  } else {
    document.getElementById("nav").style.height = "90px";
    document.getElementById("nav").style.backgroundColor = "#202020";
    document.getElementById("logo").style.width = "300px";
    document.getElementById("nav2.1").style.fontSize = "20px";
  }
}
4
If (window.innerWidth<775) ...
5

Działa, ale tylko gdy odświeży się stronę. Da się jakoś w czasie rzeczywistym? (jak media query w css)

Tak?

window.onresize = _ => { 
    if(window.innerWidth<775) {

    }
}
0

Jestem zielony w js :/
W tej chwili wygląda to tak:


window.onscroll = function() {scrollFunction()};

if (window.innerWidth >= 775) {
    
function scrollFunction() {
  if (document.body.scrollTop > 40 ||                   document.documentElement.scrollTop > 40) {
    document.getElementById("nav").style.height = "60px";
    document.getElementById("nav").style.backgroundColor = "rgb(32, 32, 32, 0.95)";
    document.getElementById("logo").style.width = "200px";
    document.getElementById("nav2.1").style.fontSize = "18px"; 
  } else {
    document.getElementById("nav").style.height = "90px";
    document.getElementById("nav").style.backgroundColor = "#202020";
    document.getElementById("logo").style.width = "300px";
    document.getElementById("nav2.1").style.fontSize = "20px";
  }
}}

3

O coś takiego ci chodzi?

window.onscroll = (_) => {
  if (window.innerWidth >= 775) {
    if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40 ) {
      document.getElementById("nav").style.height = "60px";
      document.getElementById("nav").style.backgroundColor =
        "rgb(32, 32, 32, 0.95)";
      document.getElementById("logo").style.width = "200px";
      document.getElementById("nav2.1").style.fontSize = "18px";
    } else {
      document.getElementById("nav").style.height = "90px";
      document.getElementById("nav").style.backgroundColor = "#202020";
      document.getElementById("logo").style.width = "300px";
      document.getElementById("nav2.1").style.fontSize = "20px";
    }
  }
};

Jeżeli chcesz wywoływać funkcję to możesz tak:

const scrollFunction = (_) => {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    document.getElementById("nav").style.height = "60px";
    document.getElementById("nav").style.backgroundColor =
      "rgb(32, 32, 32, 0.95)";
    document.getElementById("logo").style.width = "200px";
    document.getElementById("nav2.1").style.fontSize = "18px";
  } else {
    document.getElementById("nav").style.height = "90px";
    document.getElementById("nav").style.backgroundColor = "#202020";
    document.getElementById("logo").style.width = "300px";
    document.getElementById("nav2.1").style.fontSize = "20px";
  }
};

window.onscroll = (_) => {
  if (window.innerWidth >= 775) {
    scrollFunction();
  }
};

3

A czemu to wgl chcesz robić w JS? Zmieniasz tu tylko style, więc media query to idealne rozwiązanie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1