Question

所以我有一个带有徽标的粘性引导导航栏，可以在滚动时更改大小和填充，但是填充会根据设备是横向还是纵向而有所不同。 if 语句正确地记录到控制台，并且边距开始正确，但是当您向下滚动并向上滚动时，边距保持在 0 0 就像它处于向下滚动位置一样。任何额外的眼睛将不胜感激。

var portrait = window.matchMedia("(max-width: 600px)");
var landscape = window.matchMedia("(min-width: 601px)");

// When the user scrolls down 100px from the top of the document, resize the header's logo
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    document.getElementById("header").style.height = "100px";
    document.getElementById("logo").style.height = "120px";
    if (portrait.matches) {
      document.getElementById("logo").style.margin = "0 45px !important";
    } else if (landscape.matches) {
      document.getElementById("logo").style.margin = "0 0 !important";
    }
    document.getElementById("header").style.backgroundColor = "rgba(0,0,0,0.75)";
  } else {
    document.getElementById("header").style.height = "160px";
    document.getElementById("logo").style.height = "220px";
    if (portrait.matches) {
      document.getElementById("logo").style.margin = "0 0";
    } else if (landscape.matches) {
      document.getElementById("logo").style.margin = "0 0 !important";
    }
    document.getElementById("header").style.backgroundColor = "rgba(0,0,0,1)";
  }
}

Answer 1

为了让我们了解它为什么不起作用，您需要包含您的 HTML 和 CSS 代码。我不明白为什么它不能只使用您的 JavaScript 代码。

粘性导航边距不适用于移动设备

1 个答案: