스크롤에서 머리글 크기가 완벽하게 조정되지만

Question

현재 위치 (Y)를 확인하는 자바 스크립트를 설정했습니다. 5px 이상 스크롤 한 경우 헤더의 크기가 조정됩니다. 그게 완벽하게 작동하지만 주요 문제는 미디어 쿼리에서 자바 스크립트를 끄거나 끄고 싶습니다. 지금은 웹 페이지를 모바일 친화적으로 만들기 위해 노력하고 있지만 자바 스크립트를 사용하지 않도록 관리하지는 않았습니다. 작은 장치에서 스크롤 할 때 머리글의 크기를 조정하는 것을 원하지 않습니다. 지금 당장은 완전히 잃어 버렸습니다. 나는 봤지만, 나를 도울 수있는 것을 찾지 못했습니다 ..

여기에 헤더에 대한 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

yPos과 함께 window.innerWidth을 확인하고 두 조건이 일치하는 경우 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 2

당신은 윈도우의 폭을 결정하는 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 3

왜 추가/제거 클래스보다는 직접 CSS 변경 사항을 적용하기 위해 자바 스크립트를 사용할 수 있습니까? 그런 다음 미디어 내용을 마음의 콘텐츠로 쿼리 할 수 ​​있으며 방문객의 컴퓨터에 약간의 오버 헤드가 발생합니다.

또한 스크롤 한 후 브라우저 창 크기를 모바일 크기로 조정할 수있는 이점이 있습니다.