javascript 질문드려욥~
본문
아래는 html입니다
<header id="header">
<div class="inner">
<h1 id="corporate-logo"><a href="#"><img src="img/logo.svg" /></a>
</h1><!-- corporate-logo end -->
<nav id="global-nav">
<ul id="menu-global">
<li><a href="#" class="menu">HOME</a></li>
<li><a href="#" class="menu">SERVICE</a></li>
<li><a href="#" class="menu">COMPANY</a></li>
<li><a href="#" class="menu">RECRUIT</a></li>
<li><a href="#" class="menu">CONTACT</a></li>
<li><a href="#" class="menu">BLOG</a></li>
</ul><!-- #menu-global end -->
</nav><!-- #global-nav end -->
</div><!-- .inner end -->
</header><!-- #header end -->
아래는 css입니다
#header {
height:110px;
}
#header .inner {
width: 1140px;
margin: 0 auto;
height: 68px;
padding: 42px 0 0 0;
}
#header .inner #corporate-logo {
width: 272px;
float: left;
margin: 0 0 0 30px;
}
#header #global-nav {
float: right;
margin: 0 30px 0 0;
}
#header #global-nav #menu-global {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 1rem;
line-height: 63px;
height: 68px;
}
#header #global-nav #menu-global li {
display:block;
width:111px;
text-align: center;
color: #000000;
}
#header #global-nav #menu-global li .menu {
display: block;
border-top: 5px solid #ffffff ;
}
#header #global-nav #menu-global li a:hover {
border-top: 5px solid #7ac943 ;
}
아래는 js입니다
var menuHeight = $('#header').height();
var startPos = 0;
$(window).scroll(function(){
var currentPos = $(this).scrollTop();
if (currentPos > startPos){
if($(window).scrollTop() >= 20){
$('#header').css('top','-' + menuHeight + 'px');
}
} else {
$('#header').css('top', 0 + 'px');
}
startPos = currentPos;
});
폭이 750px이하일 경우에는
아래로 스크롤 할 때는 로고와 메뉴가 숨고,
위로 스크롤 할 때는 메뉴만 보이게 하고 싶습니다.
위 코드를 이용하여 만들었는데 높이가 잘 안맞고 잘 안되서요 ㅠ ㅠ..
로고와 메뉴가 표시되는 상태인데,
로고는 맨위로 올라갔을 때만 보이고,
위로 스크롤 할 때는 메뉴네비만 보이게 하고 싶은데
어디를 수정하면 그렇게 할 수 있을까요? ㅠ
(제 질문이 이해가 안가시면 알려주세요,
제가 한글이 좀 딸립니다 ㅠ)
한번 봐주시면 감사하겠습니다.
답변 1
ie8 지원해야 하나요? 지원안해도 된다면,
미디어 쿼리를 사용하여 해당 부분을 fixed 속성을 추가하면 원하는 결과가 나올것 같네요.
@media screen and (max-width:750px) {
#header{display:fixed}
}
대략이런식... 물론 테스트는 안해봤습니다.
해결하고 삭제 하러 들어왔는뎁 호곡 ㅎ ㅎ
댓글 감사합니다~
답변을 작성하시기 전에 로그인 해주세요.
