비주얼 스튜디오 코드 60

728x90

스크롤 시 네비게이션 보이기

html 마크업

css reset

css 편집

#nav

nav position: absolute 띄워주기

nav를 숨겨놨다가 on을 만나면 나오게 되고 고정해줌

#contents

menu를 누르면 해당 페이지로 넘어간다.

#nav를 숨겨주기

window 스크롤 됐을 때 nav와 on이 만나서 이벤트가 발생해야함

스크롤을 내리면 nav가 나타난다.

menu 클릭하면 해당 페이지로 감

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스크롤 시 네비게이션 보이기</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="nav">
        <h1 class="logo">크리스탈</h1>
        <ul class="menu">
            <li class="active"><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
            <li><a href="#">menu5</a></li>
            <li><a href="#">menu6</a></li>
        </ul>
    </div>
    <div id="contents">
        <div id="div1"><h2>오늘 비가 많이 와요.</h2></div>
        <div id="div2"><h2>하교 때만 안오면 좋겠어요.</h2></div>
        <div id="div3"><h2>바람도 많이 분다고 합니다.</h2></div>
        <div id="div4"><h2>모두 모두 건강 조심합시다.</h2></div>
        <div id="div5"><h2>오늘 점심은??</h2></div>
        <div id="div6"><h2>비오는 날은 해물파전</h2></div>
    </div>

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

    <script>

        const nav = $("#nav > .menu > li");
        const cont = $("#contents > div");

        nav.click(function(e){
            e.preventDefault();
            let target = $(this);
            let index = target.index();
            let section = cont.eq(index);
            let offset = section.offset().top
            $("html").animate({scrollTop:offset},600);
        });

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

            if(wScroll > 200){
                // cont.eq(1).offset().top : 두번째 페이지부터 보이기
                $("#nav").addClass("on");
            }else if(wScroll == 0){
                $("#nav").removeClass("on");
            }

            if(wScroll >= cont.eq(1).offset().stop){
                nav.removeClass("active");
                nav.eq(1).addClass("active");
            }
            if(wScroll >= cont.eq(2).offset().stop){
                nav.removeClass("active");
                nav.eq(2).addClass("active");
            }
            if(wScroll >= cont.eq(3).offset().stop){
                nav.removeClass("active");
                nav.eq(3).addClass("active");
            }
            if(wScroll >= cont.eq(4).offset().stop){
                nav.removeClass("active");
                nav.eq(4).addClass("active");
            }
            if(wScroll >= cont.eq(5).offset().stop){
                nav.removeClass("active");
                nav.eq(5).addClass("active");
            }
            if(wScroll >= cont.eq(6).offset().stop){
                nav.removeClass("active");
                nav.eq(6).addClass("active");
            }

        });


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

<css>

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    /* margin, padding 사이즈 반영이 안되서 높이, 너비값으로 직접 적용 */
    box-sizing: border-box;
    color: #222;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}

.clearfix::before, .clearfix::after{
    display: block;
    content: "";
    clear: both;
}

#nav{
    position: absolute;
    left: 0;
    top: -61px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    height: 60px;
}
#nav.on{
    /* nav를 위로 숨겨 놨다가 on을 만나면 고정시킴 */
    position: fixed;
    top: 0;
}
#nav .logo{
    float: left;
    width: 200px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 2px 2px 2px #999;
}
#nav .menu{
    float: right;
    margin-right: 20px;
}

#nav .menu li{
    /* menu 한줄로 나열하기 */
    display: inline;
}
#nav .menu li a{
    display: inline-block;
    padding: 20px 15px;
    font-weight: bold;
    color: cornflowerblue;
    text-transform: capitalize;
}
#nav .menu li.active{}
#nav .menu li.active a{
    color: rgb(54, 41, 152);
}

#contents{
    text-align: center;
}
#contents > div{
    height: 100vh;
    width: 100%;
    line-height: 100vh;
}
#contents > div >h2{
    color: #fff;
    font-size: 6vw;
    /* 글자 한페이지 넘어가지 않게하기 */
    white-space: nowrap;
    letter-spacing: -3px;
    text-shadow: 2px 2px 3px #000;
}

#div1{background-color: lightblue;}
#div2{background-color: lightcoral;}
#div3{background-color: lightcyan;}
#div4{background-color: lightgreen;}
#div5{background-color: lightsalmon;}
#div6{background-color: lightseagreen;}

728x90

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

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

비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02 (0)	2023.07.04
비주얼 스튜디오 코드 61 _ 비교연산자 (0)	2023.07.04
비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기 (0)	2023.07.03
비주얼 스튜디오 코드 58_햄버거 메뉴 복습 (0)	2023.07.03
비주얼 스튜디오 코드 57 _ parallax 05 (0)	2023.06.30