728x90
하단으로 스크롤을 할 때, 상단에 붙어있는 메뉴 바를 고정시켜
아래로 스크롤 해도 메뉴 바는 고정되어 상단 메뉴에 접근을 용이하게 할 때, 사용하면 된다
아래 코드 참고
<HTML>
<section id="screen1">
<p>Scroll down</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
<JS>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
<CSS>
* {margin: 0; padding: 0;}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
body {
color: #fff;
font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
font-size: 18px;
text-align: center;
}
/* Navigation Settings */
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav li {
display: inline-block;
padding: 24px 10px;
}
nav li a {
color: #757575;
text-transform: uppercase;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #43b29d;
}
#screen1 p {
padding-top: 200px;
}
#screen2 {
background: #efc94d;
}
#screen3 {
background: #e1793d;
}
@media only screen and (max-width: 520px) {
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 14px;
}
}
728x90
'개발 > FRONT' 카테고리의 다른 글
| [RN] 앱 실행 오류, Pod Install 오류 시, 대처 방법 (0) | 2023.03.30 |
|---|---|
| [JS] Jquery Input 태그에서 달력 가져오기 datepicker (0) | 2023.01.02 |
| [Jquery] 데이터 탭 메뉴 (탭 바) 구현하기 (0) | 2022.08.25 |
| [Javascript] Url 파라미터 가져오는 방법, 새로고침 파라미터 수정 추가 방법 (0) | 2022.08.25 |
| [Javascript] 객체에 데이터 담아서 전달하기 (서버에서 Map으로 데이터 받기), 객체 리스트에 담아서 전달하기 (0) | 2022.08.25 |
