최근 홈페이지에 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. 자바스크립트 화일을 추가합니다.