자바스크립트(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');
});

댓글

이 블로그의 인기 게시물

About JVM Warm up

About idempotent

About Kafka Basic

About ZGC

sneak peek jitpack

Spring Boot Actuator readiness, liveness probes on k8s

About Websocket minimize data size and data transfer cost on cloud

About G1 GC

대학생 코딩 과제 대행 java, python, oracle 네 번째