자바스크립트(Javascript) 제이쿼리(JQuery)로 Sticky Header 기능 만들어보기

우선 실행 영상,

전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,,
https://github.com/leehyolim/Balpoom
html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만
position속성을 이용해서 특정 height를 지나치면 top에 붙어서 fixed로 바꿔주고
평상시에는 static이 되도록 코드를 짜준다.


var navbarHeight=document.getElementById("header_navbar");
var submenu=document.getElementById("header_submenu");

function stop(){
if(window.pageYOffset > 130)
{
navbarHeight.style.position="fixed";
submenu.style.position="fixed";
navbarHeight.style.top="0px";
submenu.style.top="123px";
}
else
{
navbarHeight.style.position="static";
submenu.style.position="static";
navbarHeight.style.top="0px";
submenu.style.top="0px";
}
}
window.addEventListener("scroll", stop);




여기서부터는 서브메뉴 코드
mouseenter하면 display:none; 에서 inline-block으로 바뀌게끔 코드를 짠다.
mouseleave하면 display:inline-block에서 none;으로 반대로 바뀌게끔 코드를 짜줌.

$('#header_outer').mouseenter(function() {
$('.sub_Outer').css('display', 'inline-block');
$('.sub_Top').css('display', 'none');
$('.sub_Bottom').css('display', 'none');
$('.sub_Shoes').css('display', 'none');
$('#header_outer').css('border-bottom','8px solid black');
$('#header_top').css('border-bottom','8px solid #d1d1d1');
$('#header_bottom').css('border-bottom','8px solid #d1d1d1');
$('#header_shoes').css('border-bottom','8px solid #d1d1d1');
});

$('#header_top').mouseenter(function() {
$('.sub_Outer').css('display', 'none');
$('.sub_Top').css('display', 'inline-block');
$('.sub_Bottom').css('display', 'none');
$('.sub_Shoes').css('display', 'none');
$('#header_outer').css('border-bottom','8px solid #d1d1d1');
$('#header_top').css('border-bottom','8px solid black');
$('#header_bottom').css('border-bottom','8px solid #d1d1d1');
$('#header_shoes').css('border-bottom','8px solid #d1d1d1');
});

$('#header_bottom').mouseenter(function() {
$('.sub_Outer').css('display', 'none');
$('.sub_Top').css('display', 'none');
$('.sub_Bottom').css('display', 'inline-block');
$('.sub_Shoes').css('display', 'none');
$('#header_outer').css('border-bottom','8px solid #d1d1d1');
$('#header_top').css('border-bottom','8px solid #d1d1d1');
$('#header_bottom').css('border-bottom','8px solid black');
$('#header_shoes').css('border-bottom','8px solid #d1d1d1');
});

$('#header_shoes').mouseenter(function() {
$('.sub_Outer').css('display', 'none');
$('.sub_Top').css('display', 'none');
$('.sub_Bottom').css('display', 'none');
$('.sub_Shoes').css('display', 'inline-block');
$('#header_outer').css('border-bottom','8px solid d1d1d1');
$('#header_top').css('border-bottom','8px solid #d1d1d1');
$('#header_bottom').css('border-bottom','8px solid #d1d1d1');
$('#header_shoes').css('border-bottom','8px solid black');
});

$('.submenu ul').mouseleave(function() {
$('li.sub_Outer').css('display', 'none');
$('#header_outer').css('border-bottom','8px solid #d1d1d1');
$('#header_top').css('border-bottom','8px solid #d1d1d1');
$('#header_bottom').css('border-bottom','8px solid #d1d1d1');
$('#header_shoes').css('border-bottom','8px solid #d1d1d1');
});

$('.submenu ul').mouseleave(function() {
$('li.sub_Top').css('display', 'none');
$('#header_outer').css('border-bottom','8px solid #d1d1d1');
$('#header_top').css('border-bottom','8px solid #d1d1d1');
$('#header_bottom').css('border-bottom','8px solid #d1d1d1');
$('#header_shoes').css('border-bottom','8px solid #d1d1d1');
});

$('.submenu ul').mouseleave(function() {
$('li.sub_Bottom').css('display', 'none');
$('#header_outer').css('border-bottom','8px solid #d1d1d1');
$('#header_top').css('border-bottom','8px solid #d1d1d1');
$('#header_bottom').css('border-bottom','8px solid #d1d1d1');
$('#header_shoes').css('border-bottom','8px solid #d1d1d1');
});

$('.submenu ul').mouseleave(function() {
$('li.sub_Shoes').css('display', 'none');
$('#header_outer').css('border-bottom','8px solid #d1d1d1');
$('#header_top').css('border-bottom','8px solid #d1d1d1');
$('#header_bottom').css('border-bottom','8px solid #d1d1d1');
$('#header_shoes').css('border-bottom','8px solid #d1d1d1');
});