[자바스크립트] 상단 고정 메뉴 - 메뉴 두개 고정할 때

메뉴

로고

메뉴

내용

있는 경우

메뉴

메뉴

로 표시

<div id="header_wrap">

<div id="header_topbar">

<div class="header_topbar_layout">

<!-- 고정 상태 : 로고 / 검색 -->

<ul id="header_topbar_fix">

<li class="header_topbar_logo">

<a href="/">

<img src="ogo_fix.png"

alt="헤더 고정 로고">

</a>

</li>

<li id="header_topbar_fix_search">

<form id="header_topbar_fix_search_form" action="" method="get"

enctype="multipart/form-data">

<div id="header_topbar_fix_search_layout">

<fieldset>

<input id="header_topbar_fix_search_keyword"

onchange="this.className=(this.value=='')?'':'visited';">

<button id="header_topbar_fix_search_btn"></button>

</fieldset>

</div>

</form>

</li>

</ul>

<!-- // 고정 상태 : 로고 / 검색 -->

<ul id="header_topbar_menu">

<li class="header_topbar_logout" >

<a href="/member/login">로그인</a>

</li>

<li class="header_topbar_logout">

<a href="/member/join">회원가입 </a>

</li>

<li class="header_topbar_logout">

<a href="/mypage/order_list">주문조회</a>

</li>

<li class="header_topbar_logout">

<a href="/mypage/my_basket">장바구니 </a>

</li>

<li class="header_topbar_logout">

<a href="/mypage">마이페이지</a>

</li>

</ul>

</div>

</div>

<!-- 로고 / 검색 -->

<div id="header_logo_search">

<div class="layout">

<!-- 로고 -->

<div id="header_logo">

<a href="/"> <img

src="header/logo.png"

alt="셀비샵 로고">

</a>

</div>

<!-- // 로고 -->

<!-- 검색 -->

<div id="header_search">

<form id="header_search_form" action="" method="get"

enctype="multipart/form-data">

<div id="header_search_layout">

<fieldset>

<input id="header_search_keyword"

onchange="this.className=(this.value=='')?'':'visited';">

<button id="header_search_btn"></button>

</fieldset>

</div>

</form>

</div>

<!-- // 검색 -->

</div>

</div>

<!-- // 로고 / 검색 -->

<!-- 메뉴 -->

<div id="header_navi" class="navi">

<div id="header_navi_menu">

<div class="layout">

<div id="navi_menu">

<ul>

<li class="menu"><a href="/product_all">전체상품</a></li>

<li class="menu"><a href="/category1">카테고리1</a></li>

<li class="menu"><a href="/category2">카테고리2</a></li>

<li class="menu"><a href="/category3">카테고리3</a></li>

<li class="menu"><a href="beautyshop">셀비 studio</a></li>

<li class="menu"><a href="customer_service">고객센터</a></li>

</ul>

</div>

</div>

</div>

</div>

<!-- // 메뉴 -->

</div>

@charset "UTF-8";

/* 공통 */

li {

list-style: none;

}

img, fieldset {

border: none;

vertical-align: top;

}

input, select, textarea {

vertical-align: middle;

}

.layout {

width: 1024px;

min-width: 1024px;

display: block;

margin: auto;

}

/* 크롬 스크롤바 투명하게 */

::-webkit-scrollbar {

height: 0px;

width: 0px;

}

/* 헤더 영역 */

#header_wrap {

display: block;

}

/* topbar 영역 */

#header_topbar {

position: relative;

z-index: 30;

width: 100%;

border-bottom: 1px solid #f2f2f2;

}

.header_topbar_layout {

position: relative;

width: 1000px;

min-width: 1000px;

height: 40px;

display: block;

margin: auto;

}

#header_topbar_fix {

position: relative;

z-index: 10;

float: left;

display: none;

}

#header_topbar_fix a {

display: block;

text-decoration: none;

}

#header_topbar_fix .header_topbar_logo {

position: relative;

float: left;

}

#header_topbar_fix .header_topbar_logo>a {

line-height: 33px;

}

#header_topbar_fix .header_topbar_logo img {

position: relative;

top: 7px;

margin: 0 7px 0 -2px;

}

#header_topbar_fix_search {

position: relative;

float: right;

height: 26px;

margin: 3px 0 0 24px;

}

#header_topbar_fix_search_layout {

background: #f4f4f4;

}

#header_topbar_fix_search_layout fieldset {

line-height: 0;

position: relative;

}

#header_topbar_fix_search input {

outline: none;

font-size: 12px;

width: 148px;

height: 29px;

background-color: #f4f4f4;

color: #666;

border-radius: 20px;

-webkit-transition: all 200ms ease-in-out;

-moz-transition: all 200ms ease-in-out;

-o-transition: all 200ms ease-in-out;

transition: all 200ms ease-in-out;

padding-left: 10px;

}

#header_topbar_fix_search input:focus, #header_topbar_fix_search input:visited

{

width: 200px;

}

#header_topbar_fix_search_btn {

position: absolute;

outline: none;

right: 0;

top: 0;

cursor: pointer;

background: none;

padding: 0 14px;

background-image:

url("btn_search.png");

background-repeat: no-repeat;

width: 16px;

height: 17px;

margin-top: 5px;

}

/* 탑바 메뉴 */

#header_topbar_menu {

position: relative;

float: right;

z-index: 10;

font-family: "Noto Sans KR Light", 맑은고딕, Arial, sans-serif;

font-size: 12px;

font-weight: 300;

font-style: normal;

font-stretch: normal;

line-height: 0.04;

letter-spacing: 0.6px;

}

#header_topbar_menu .header_topbar_login, #header_topbar_menu .header_topbar_logout

{

position: relative;

float: left;

}

#header_topbar_menu .header_topbar_login:nth-child(1),

#header_topbar_menu .header_topbar_logout:nth-child(1) {

margin-right: 24px;

}

#header_topbar_menu .header_topbar_login:nth-child(2),

#header_topbar_menu .header_topbar_logout:nth-child(2) {

margin-right: 24px;

}

#header_topbar_menu .header_topbar_login:nth-child(3),

#header_topbar_menu .header_topbar_logout:nth-child(3) {

margin-right: 22px;

}

#header_topbar_menu .header_topbar_login:nth-child(4),

#header_topbar_menu .header_topbar_logout:nth-child(4) {

margin-right: 20px;

}

#header_topbar_menu .header_topbar_login:nth-child(5) {

margin-right: 12px;

}

#header_topbar_menu a {

display: block;

text-decoration: none;

}

#header_topbar_menu .header_topbar_login>a, #header_topbar_menu .header_topbar_logout>a  {

height: 35px;

line-height: 35px;

color: #000;

}

#header_topbar_menu .header_topbar_login .login_name {

font-family: "Noto Sans KR Bold", 맑은고딕, Arial, sans-serif;

color: #e5006a;

font-size: 12px;

font-weight: bold;

font-style: normal;

font-stretch: normal;

letter-spacing: 0.6px;

}

/* 로고 / 검색 */

#header_logo_search {

display: block;

padding: 0;

z-index: 2;

background: #fff;

overflow: auto;

text-align: center;

width: 100%;

}

#header_logo {

margin-top: 45px;

margin-bottom: 53px;

float: left;

display: inline-block;

font-size: 35px;

line-height: 54px;

text-transform: uppercase;

margin-left: 409px;

}

#header_logo a {

color: #000;

text-decoration: none;

}

#header_logo a img {

height: 36px;

}

#header_search {

display: inline-block;

/* width: 340px; */

margin: 52px 0;

margin-right: 12px;

float: right;

}

#header_search_layout {

background: #f4f4f4;

/* border-radius: 0px 25px 0px 25px; */

}

#header_search_layout fieldset {

line-height: 0;

position: relative;

}

#header_search input {

outline: none;

font-size: 12px;

width: 148px;

height: 29px;

background-color: #f4f4f4;

color: #666;

border-radius: 20px;

-webkit-transition: all 200ms ease-in-out;

-moz-transition: all 200ms ease-in-out;

-o-transition: all 200ms ease-in-out;

transition: all 200ms ease-in-out;

padding-left: 10px;

}

#header_search input:focus, #header_search input:visited {

width: 200px;

}

#header_search_btn {

position: absolute;

outline: none;

right: 0;

top: 0;

cursor: pointer;

background: none;

/* color: #222;

border: 0;

font-size: 17px;

line-height: 27px; */

padding: 0 15px;

background-image:

url("btn_search.png");

background-repeat: no-repeat;

width: 16px;

height: 17px;

margin-top: 5px;

}

/* 네비게이션 메뉴 */

#header_navi {

position: relative;

z-index: 2;

background: #fff;

border-bottom: 2px solid #e5046c;

}

#header_navi .navi {

padding: 0;

position: fixed;

top: 0;

width: 100%;

z-index: 98;

}

#header_navi_menu {

display: block;

}

#navi_menu {

position: relative;

}

#navi_menu ul {

display: block;

margin-bottom: 0;

}

#navi_menu ul>li {

z-index: 10;

display: inline-block;

vertical-align: middle;

margin-top: 8px;

}

#navi_menu ul>li:nth-child(1) {

margin-left: 10px;

}

#navi_menu ul>li:nth-child(2) {

margin-left: 127px;

}

#navi_menu ul>li:nth-child(3) {

margin-left: 121px;

}

#navi_menu ul>li:nth-child(4) {

margin-left: 120px;

}

#navi_menu ul>li:nth-child(5) {

margin-left: 116px;

}

#navi_menu ul>li:nth-child(6) {

margin-left: 121px;

}

#navi_menu ul>li>a {

cursor: pointer;

line-height: 35px;

display: inline-block;

color: #000;

text-decoration: none;

font-family: "Noto Sans KR Light", 맑은고딕, Arial, sans-serif;

font-size: 15px;

font-style: normal;

font-stretch: normal;

letter-spacing: -0.6px;

}

.menu {

position: relative;

height: 40px;

}

$(function() {

var menupos = $("body").offset().top;

$(window).scroll(function() {

if ($(window).scrollTop() > 500) {

$("#header_topbar").css("position", "fixed");

$("#header_topbar").css("top", "0");

$("#header_topbar").css("width", "100%");

$("#header_topbar_fix").css("display", "block");

$("#header_topbar_menu .topbar_menu:nth-child(5)").css("margin-right", "0");

} else {

$("#header_topbar").css("position", "relative");

$("#header_topbar").css("top", "0");

$("#header_topbar_fix").css("display", "none");

}

});

});

$(function() {

var menupos = $("body").offset().top;

$(window).scroll(function() {

if ($(window).scrollTop() >  500) {

$("#header_navi").css("position", "fixed");

$("#header_navi").css("top", "40");

$("#header_navi").css("width", "100%");

$("#navi_menu ul>li>a").css("margin-top", "25px");

$("#navi_menu ul>li>a").css("line-height", "0");

$(".menu").css("height", "48px");

} else {

$("#header_navi").css("position", "relative");

$("#header_navi").css("top", "0");

}

});

});