Header Scroll Action_ Code

세빈·2021년 10월 25일
0

웹디자인

목록 보기
2/2

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;
}
profile
코딩도 하고, 디자인도 합니다. 디자인이 좀 더 좋은 건 안비밀

0개의 댓글