동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
최근 홈페이지에 Sticky메뉴를 많이 볼 수 있습니다.
마우스로 스크롤을 하다보면 메뉴가 상단에 고정되는 것을 볼 수 있습니다.
이 부분도 소스코드를 활용하여 쉽게 적용할 수 있습니다.
기존 작업된 html코드를 보고 중복되지 않는 선에서 수정을 하면 됩니다.
HTML :
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
CSS :
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
Javascript :
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
우리는 위에서 기존 메뉴html에 navbar 아이디만 추가하고 자바스크립트 코드만 반영하면 됩니다.
1. 기존 프로젝트 메뉴부분을 찾아서 navbar 아이디를 추가합니다.
2. css화일을 열고 sticky클래스 부분만 추가합니다.
3. 자바스크립트 화일을 추가합니다.
등록된 댓글이 없습니다.