비주얼 스튜디오 코드 55

728x90

html 마크업

css 편집_contents

css 편집_nav

●.each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드

header 높이값

if문을 이용하여 nav 액션주기

처음에는 nav가 밑에 있고 스크롤을 내리면 nav가 위로 올라가는 액션이다.

this 는 nav 이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>패럴럭스_4</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <nav id="nav">
        <h1>JHH's Website</h1>
        <ul class="menu">
            <li class="active"><a href="#article1">menu1</a></li>
            <li><a href="#article2">menu2</a></li>
            <li><a href="#article3">menu3</a></li>
            <li><a href="#article4">menu4</a></li>
            <li><a href="#article5">menu5</a></li>
            <li><a href="#article6">menu6</a></li>
        </ul>
    </nav>
    <section id="contents">
        <article id="article1"><h2>열심히 합시다.</h2></article>
        <article id="article2"><h2>졸지 마시고 자십시오</h2></article>
        <article id="article3"><h2>무슨 일 이든 안되면 반복하세요</h2></article>
        <article id="article4"><h2>오늘 비가 너무 많이 오네요</h2></article>
        <article id="article5"><h2>평양냉면 먹고싶다.</h2></article>
        <article id="article6"><h2>돈 많은 백수가 됐으면 좋겠다.</h2></article>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        // 2페이지 네비를 위에 fixed
        $("#nav").each(function(){
            let header = $(this);
            let headerOffset = header.offset().top;
            // console.log(headerOffset);

            // .each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드


            $(window).scroll(function(){
                let wScroll = $(this).scrollTop();
                console.log(wScroll);

                if(wScroll > headerOffset){
                    header.addClass("on");
                }
                else{
                    header.removeClass("on"); 
                }
            });
        });



        // 변수 지정
        const nav = $("#nav ul li");
        const cont = $("#contents > article")
        
        // 클릭이벤트
        nav.click(function(e){
            e.preventDefault();
            let target = $(this);
            let index = target.index();
            let section = cont.eq(index);
            let offset = section.offset().top;
            $("html,body").animate({scrollTop:offset},600);
        });

    </script>
</body>
</html>

@charset "utf-8";

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #222;
}
li{
    list-style: none;
}
a{
    color: #222;
    text-decoration: none;
}


/* nav */

#nav{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(255,255,255,0.5);
    z-index: 100;
}

/* nav에 on이라는 성질을 가졌을 때  */
#nav.on{
    position: fixed;
    top: 0;
}

#nav h1{
    float: left;
    padding-left: 20px;
    line-height: 60px;
    font-size: 40px;
}
#nav .menu{
    float: right;
    padding: 10px;
}
#nav .menu li{
    display: inline;
}
#nav .menu li a{
    display: inline-block;
    padding: 20px 15px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
}
#nav .menu li.active{}




/*contents */
#contents{
    text-align: center;
}
#contents > article{
    width: 100%;
    height: 100vh;
    line-height: 100vh;
}
#contents > article > h2{
    font-size: 80px;
    font-weight: bold;
}

#article1{background-color: darkslateblue;}
#article2{background-color: darkturquoise;}
#article3{background-color: darkcyan;}
#article4{background-color: darkkhaki;}
#article5{background-color: darkorange;}
#article6{background-color: darkorchid;}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 57 _ parallax 05 (0)	2023.06.30
비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) (0)	2023.06.30
[JAVASCRIPT]5.클래스 제어하기 (0)	2023.06.29
비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자 (0)	2023.06.29
비주얼 스튜디오 코드 53_parallax03 (2)	2023.06.28