1. html code
<!-- header -->
<header class="navbar-fixed-top" id="header">
<nav>
<ul>
<li><a href="#ch1">1.<br>가나안 성도,<br>그들은 누구인가?</a></li>
<li><a href="#ch2">2.<br>가나안 성도가<br>증가하고 있다.</a></li>
<li><a href="#ch3">3.<br>한동대 내<br>가나안 성도의 목소리</a></li>
<li><a href="#ch4">4.<br>그들은<br>지금-</a></li>
<li><a href="#ch5">5.<br>그들은<br>틀린 게 아니다.</a></li>
</ul>
</nav>
</header>
<!-- ./header -->
2. jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
3. JavaScript
<!-- header scroll event -->
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop(); // Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
// for carousel _ add 0613
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},allowPageScroll:"vertical"
});
</script>
4. CSS code
/* Header
==================================================*/
header {
text-align: center;
-webkit-transition: all .5s;
transition: all .5s;
height: 100px; /* 변경: header 높이 */
position: fixed;
}
/* 구글링 https://webdir.tistory.com/481 */
.nav-up {top: -130px;} /*조금 남아서 20px 크게 잡음*/
nav ul {
display: inline-block;
padding-left: 0;
list-style: none;
padding: 20px;
margin-bottom: 0;
-webkit-transition: all .5s;
transition: all .5s;
}
nav li {
display: inline-block;
margin: 10px;
}
nav li a {
color: rgba(173, 173, 173, 0.767); /*바꿈*/
font-weight: bold;
font: normal normal bold 13px/20px Noto Serif CJK KR;
letter-spacing: -0.1px;
}
.bg-nav {
background: #fff;
border-bottom: 1px solid #f3f3f3
}
.bg-nav ul {
padding: 10px;
}
a:focus {
color: rgba(173, 173, 173, 0.767);
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}
a.active {
color: #daedff;
}