Header 在滚动时完美调整大小，但是

Question

我设置了一个 javascript 来检查我的当前位置 (Y)。如果我滚动超过 5 像素，header 会调整大小。这工作得很好，但主要问题是我想在媒体查询中从 javascript 中删除 off/turn。现在我正在努力使我的网页适合移动设备，但我还没有设法关闭 javascript。我不希望 header 在较小的设备上滚动时调整大小，我现在完全迷路了。我用谷歌搜索，但没有找到任何可以帮助我的东西..

这是我对 header 的 HTML。

<div class="headerbox">
    <header>

            <div class="Main-Header">
                <h1>header</h1>
            </div>

    </header>
        <nav>
            <ul>
              <li><a href="#">alt1</a></li>
              <li><a href="#">alt2</a></li>
              <li><a href="#">alt3</a></li>
              <li><a href="#">alt4</a></li>
            </ul>
     <div class="underline1"></div>
     <div class="underline2"></div>
        </nav>

CSS

.headerbox{
    z-index:1;
    position:fixed;
    width:100%;
    top:0;
 }
header{
    background-color:rgba(0,0,0,0.65);
    width:100%;
    height:8.2vw;
    overflow:hidden;
    position:relative;
    transition: height 0.3s linear 0s, padding 0.3s linear 0s;
  }

h1{
    font-family:montserrat, "montserrat Medium";
    font-size:4.3vw;
 }
 .Main-Header{
    margin-left: 1vw;
    position:relative;
    float:left;
    width:20vw;
    height: 60%;
    margin-top: 1vw;
    overflow: hidden;
}
.underline1{
    border-top:0.222826vw solid #FFAE00;
    width:100%;
    margin-top:-0.51vw;
    box-shadow:#966600 0px 1px;
}
.underline2{
    border-bottom: 0.222826vw solid #FFAE00;
    width:100%;
    margin-top:2.7vw;
    box-shadow:#966600 0px -1px;
}
nav
{
    background-color:rgba(0,0,0,0.65);
    height:auto;
    width:100%;
    overflow: hidden;
    color: white;
}
ul
{
    margin-left:35px;
    font-family:montserrat, "montserrat Medium";
    font-size:1.44837vw;
    letter-spacing:-0.5px;
    text-align:center;
    margin-top:6.5px;
    list-style:none;
    font-weight:600;
    line-height:2.0797vw;
}
li{
    float:left;
    width:175px;
}
a{
    color:#FFFFFF;
    text-decoration:none;
    border-style:none;
}

最后，JS

var header, nav, adidas, option24, juventus, h1, secheader, yPos;
function yScroll(){
header = document.getElementsByTagName('header')[0];
nav = document.getElementsByTagName('nav')[0];
h1 = document.getElementsByTagName('h1')[0];
yPos = window.pageYOffset;


if(yPos > 5){
    h1.style.marginTop = "2vw";
    header.style.height = "4.4565vw";
    header.style.backgroundColor = "rgba(0,0,0,1)";
    nav.style.backgroundColor = "rgba(0,0,0,1)";
}
else {

    h1.style.marginTop = "0vw";
    header.style.backgroundColor = "rgba(0,0,0,0.65)";
    header.style.height = "8.2vw";
    nav.style.backgroundColor = "rgba(0,0,0,0.65)";
}

}
window.addEventListener("scroll", yScroll);

Answer 1

您可以使用 matchMedia 来确定 window

的宽度

if (window.matchMedia("(min-width: 400px)").matches) { /* the viewport is at least 400 pixels wide */ } else { /* the viewport is less than 400 pixels wide */ }

Answer 2

您可以检查 window.innerWidth 和 yPos，并且只有在两个条件都匹配时才应用您的 JS。

var header, nav, adidas, option24, juventus, h1, secheader, yPos;
function yScroll() {
  header = document.getElementsByTagName("header")[0];
  nav = document.getElementsByTagName("nav")[0];
  h1 = document.getElementsByTagName("h1")[0];
  yPos = window.pageYOffset;
  winWidth = window.innerWidth;

  if (yPos > 5 && winWidth > 600) {
    h1.style.marginTop = "2vw";
    header.style.height = "4.4565vw";
    header.style.backgroundColor = "rgba(0,0,0,1)";
    nav.style.backgroundColor = "rgba(0,0,0,1)";
  } else {
    h1.style.marginTop = "0vw";
    header.style.backgroundColor = "rgba(0,0,0,0.65)";
    header.style.height = "8.2vw";
    nav.style.backgroundColor = "rgba(0,0,0,0.65)";
  }
}
window.addEventListener("scroll", yScroll);

body {
  height: 500vh;
}

.headerbox{
    z-index:1;
    position:fixed;
    width:100%;
    top:0;
 }
header{
    background-color:rgba(0,0,0,0.65);
    width:100%;
    height:8.2vw;
    overflow:hidden;
    position:relative;
    transition: height 0.3s linear 0s, padding 0.3s linear 0s;
  }

h1{
    font-family:montserrat, "montserrat Medium";
    font-size:4.3vw;
 }
 .Main-Header{
    margin-left: 1vw;
    position:relative;
    float:left;
    width:20vw;
    height: 60%;
    margin-top: 1vw;
    overflow: hidden;
}
.underline1{
    border-top:0.222826vw solid #FFAE00;
    width:100%;
    margin-top:-0.51vw;
    box-shadow:#966600 0px 1px;
}
.underline2{
    border-bottom: 0.222826vw solid #FFAE00;
    width:100%;
    margin-top:2.7vw;
    box-shadow:#966600 0px -1px;
}
nav
{
    background-color:rgba(0,0,0,0.65);
    height:auto;
    width:100%;
    overflow: hidden;
    color: white;
}
ul
{
    margin-left:35px;
    font-family:montserrat, "montserrat Medium";
    font-size:1.44837vw;
    letter-spacing:-0.5px;
    text-align:center;
    margin-top:6.5px;
    list-style:none;
    font-weight:600;
    line-height:2.0797vw;
}
li{
    float:left;
    width:175px;
}
a{
    color:#FFFFFF;
    text-decoration:none;
    border-style:none;
}

<div class="headerbox">
  <header>

    <div class="Main-Header">
      <h1>header</h1>
    </div>

  </header>
  <nav>
    <ul>
      <li><a href="#">alt1</a></li>
      <li><a href="#">alt2</a></li>
      <li><a href="#">alt3</a></li>
      <li><a href="#">alt4</a></li>
    </ul>
    <div class="underline1"></div>
    <div class="underline2"></div>
  </nav>
</div>

Answer 3

为什么不使用 javascript 到 add/remove 和 class，而是直接应用 CSS 更改？然后，您可以随心所欲地进行媒体查询，它甚至会稍微降低访问者机器的开销。

它还有一个额外的好处，可以处理用户在滚动后将浏览器 window 调整为移动尺寸的问题。

Header 在滚动时完美调整大小，但是

Header resizes on scroll perfectly, but

html

javascript

css

media

resize