Question

我设置了一个检查我当前位置（Y）的JavaScript。如果我滚动超过5px，则标题会调整大小。这很完美，但主要问题是我想在媒体查询中切断/关闭javascript。现在我正在努力使我的网页移动友好，但我还没有设法关闭javascript。我不希望标题在小型设备上滚动时调整大小，我现在完全丢失了。我用谷歌搜索过，但没有找到任何可以帮助我的东西......

这是我的标题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来确定窗口的宽度

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

为什么不使用你的javascript添加/删除一个类，而不是直接应用CSS更改？然后，您可以根据自己的内容对媒体进行查询，甚至可以为访问者的计算机略微降低开销。

它还有一个额外的好处，即在滚动后处理用户将浏览器窗口大小调整为移动大小。

Answer 3

您可以查看window.innerWidth以及yPos，只有在条件匹配时才应用您的JS。

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

标题大小完全滚动，但是

3 个答案: