210410 JavaScript jQuery Scrollpage 연습_3 풀이

21382 단어 jqueryJavaScript제이쿼리풀이자바스크립트JavaScript 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        h1{
            position: fixed;
            top: 20px;
            left: 20px;
            color: #fff;
        }
        
        .gnb{
            display: flex;
            position: fixed;
            right: 20px;
            top: 30px;
            color: #fff;
        }
        
        .gnb li{
            margin-left: 20px;
        }
        
        .gnb li.on{
            background-color: #fff;
            color: #666;
        }
        
        section{
            height: 100vh;
            line-height: 100vh;
            font-size: 170px;
            font-weight: bold;
            font-family: fantasy;
            text-align: center;
            color: rgba(255,255,255,0.2);
        }
        
        .s1{background-color: dodgerblue;}
        .s2{background-color: tomato;}
        .s3{background-color: darkseagreen;}
        .s4{background-color: mediumpurple;}
        .s5{background-color: darksalmon;}
    </style>
</head>
<body>
    <h1>LOGO</h1>
    <ul class="gnb">
        <li class="on">SECTION#1</li>
        <li>SECTION#2</li>
        <li>SECTION#3</li>
        <li>SECTION#4</li>
        <li>SECTION#5</li>
    </ul>
    <section class="s1">SECTION1</section>
    <section class="s2">SECTION2</section>
    <section class="s3">SECTION3</section>
    <section class="s4">SECTION4</section>
    <section class="s5">SECTION5</section>
    
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
    
        // scroll 위치에 따라 각 섹션에 해당되는 li에 addClass("on") 하기
        var i = 0;
        var winHeight = $(window).height();
        //window의 높이값을 구하기.
        console.log(winHeight);
        
        $(window).on("scroll", function() {
            var scr = $(this).scrollTop();
            //스크롤 바 수직 위치값
            
            for (i = 0; i < $("section").length; i++) {
                if (scr >= winHeight * i && scr < winHeight * (i+1)) {
                    $("ul li").eq(i).addClass("on").siblings().removeClass("on");
                }
            }

        });

        // li를 클릭했을 때 해당되는 섹션으로 스크롤 이동시키기
        var scr = $(this).scrollTop();
        console.log(scr);

        $("ul li").on("click", function() {
            var j = $(this).index();
            console.log(j);
            $("html, body").stop().animate({
                "scrollTop" : winHeight * j
            });
        });      

    </script>
</body>
</html>
셸 모니터링 스 크 립 트 - 디스크 모니터링
PowerShell의 Timespan 시간차 객체 사용 실례

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage