CodePen Embed - zMXzza

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>


<section class="panel home" data-section-name="home">
    <div class="top-bar" style="background-color:red;">
        내용
    </div>
</section>
<section class="panel panel1" data-section-name="second">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia quas ab accusamus rem praesentium repellat quisquam! Iure provident eius harum excepturi pariatur earum, quisquam quo mollitia libero. Eveniet, eaque accusamus!
    Unde odio at nobis, accusamus nulla tempora itaque labore cupiditate autem laboriosam quaerat, doloremque doloribus atque asperiores incidunt dignissimos vitae libero qui blanditiis eos beatae harum ea? Voluptatibus, voluptatum? Quisquam.
    Nam voluptate dolorum sequi nemo voluptatibus exercitationem optio beatae sed nobis ut suscipit blanditiis, aperiam, id ad illo! A corporis laudantium earum alias optio ullam numquam, quo nostrum. Temporibus, autem.
    Sapiente voluptates possimus dolores ab veritatis fuga assumenda quas dolorum ducimus, vero corrupti ipsum, illum unde! Dignissimos ex officia optio cum? Sed sequi eius assumenda nam asperiores, quo dolorem quisquam.
    Porro atque, nobis tenetur voluptate tempore aperiam earum! Possimus laborum iste, maxime repudiandae sequi quia ipsam et nihil nam reiciendis nulla rem, aut mollitia doloribus nobis amet iusto, adipisci eligendi!
    Dolorum quaerat fuga incidunt suscipit commodi ipsam mollitia velit quidem tenetur impedit possimus eius, illum asperiores, maiores quas cum ad quae veniam? Molestias optio assumenda voluptatem consequatur, repellendus unde corporis!
    Eius, odit quasi beatae dolore nihil aut repudiandae cumque quibusdam amet dicta atque numquam voluptates? Saepe est eos illum distinctio repellat earum libero voluptates, consequatur velit magni possimus mollitia quam!
    Nostrum ut delectus tempore aliquid eum explicabo et. Fugiat officia corrupti numquam blanditiis repellat placeat quis labore dignissimos exercitationem, nobis autem vel dolore fugit! Tempore incidunt dolorum quos quasi. Nulla.
    Dolores ad cum optio assumenda porro, qui minima illum? Dignissimos officia nam animi et facere at tempore, iste aliquid neque nemo molestiae eligendi explicabo dolorum fuga quas eos facilis corporis!
    Nemo id numquam molestias repudiandae nostrum veritatis laborum mollitia? Sit voluptatibus possimus explicabo blanditiis dolor fugiat pariatur minus optio, hic tempore nihil, corrupti dolore quas. Reprehenderit modi repellendus voluptas soluta?
    Eligendi, nemo rerum tempore blanditiis pariatur itaque. Vel atque architecto, sint explicabo ducimus dolor dolores totam deserunt ipsam sed? Sunt quia minima cumque modi fuga officia, tempora animi quae nisi?
    Velit praesentium facere veritatis repellat vitae optio corrupti, quas eum ullam, voluptatum nemo unde dolorum voluptas itaque eveniet iusto natus beatae laudantium ipsam aperiam numquam? Aspernatur, laudantium rem? Consectetur, quisquam?
    Non at autem enim magnam odit natus ex? Eius reiciendis, ut ab inventore minus sequi est mollitia quisquam, dolor quasi, assumenda sit exercitationem? Deleniti, placeat? Pariatur neque ea quidem optio.
    Aut officiis impedit vero praesentium doloribus illum non in consequuntur minima similique sunt eveniet suscipit voluptatum possimus recusandae pariatur culpa labore numquam eligendi soluta, eaque quia. Et sit explicabo temporibus?
    Nulla suscipit ducimus sit accusantium totam tempora ad provident esse sed porro repudiandae amet error odit laboriosam, accusamus consequatur dolorem modi nostrum ea expedita facere, adipisci blanditiis quaerat? Blanditiis, id.
    Dolor est pariatur laudantium, ea ab animi quo ex magnam sit in dolorem a id aspernatur sequi ipsum quas. Hic tenetur mollitia eveniet rem facilis quibusdam tempore minima ratione! Animi.
    Repellendus corrupti explicabo eum voluptatibus quos magni tempora autem illo sunt modi aspernatur molestiae vel minima quasi mollitia nisi vero ipsam, perspiciatis quod sapiente velit maxime? Ipsum sequi laborum eveniet.
    Rem, assumenda eum ducimus fuga vitae error odit, omnis corrupti itaque unde officiis enim excepturi! Nobis perspiciatis distinctio rerum porro quod maiores nemo iure, inventore voluptatum reprehenderit autem placeat praesentium.
    Beatae tenetur error earum. Non, facilis saepe culpa dolorum ullam ipsam provident dolore iste quis cum, voluptatibus in aliquam placeat consequuntur atque modi odit dolores maxime consequatur eius nulla aliquid.
    Maxime, ipsam laudantium! Quod a, iusto officiis tenetur quae, voluptas qui eos assumenda mollitia dolores tempore consectetur nihil adipisci! Voluptates voluptatem illo ipsum fugiat ullam! Illo cum quasi recusandae et.
    Voluptate incidunt, harum iste unde nisi blanditiis ipsum velit qui non eius cum sapiente dolorum mollitia quam distinctio possimus nostrum nobis consequuntur rem in! Dignissimos vitae deserunt illum provident cupiditate.
    Eligendi, distinctio. Ea aliquid placeat ducimus, ipsum, repellat cum labore neque incidunt aliquam eos consequatur dolorem quos debitis fuga nesciunt nulla exercitationem officiis. Illo nihil neque culpa quasi commodi deleniti?
    Alias sit porro minus dolore, doloremque magnam aperiam molestiae perferendis excepturi distinctio non possimus laboriosam molestias at consequuntur sint? Molestiae necessitatibus, voluptates officia quae quidem ipsa. Tenetur ut cum molestiae?
    Facere sit quod ipsum earum laborum quos maiores odio sed facilis molestias, vitae deserunt mollitia nihil labore dolore corporis perferendis tempore iusto eos error eum architecto. Alias, earum. Tempore, blanditiis.
    Id laboriosam illo quos eligendi, saepe minus amet nobis dolorem aliquid, aut commodi doloribus voluptates. Nulla doloremque, commodi optio dolor sint vel eos porro eaque ipsam quasi necessitatibus, recusandae quo?
    Ab, omnis! Officiis enim repellat hic blanditiis, delectus omnis tenetur magni soluta porro corporis eos facere quibusdam nihil dolor, debitis tempora cumque esse maiores asperiores inventore, sunt quis voluptatem. Suscipit!
    Veniam similique, illum laudantium a, aut natus repellat sapiente nulla minima expedita cum sequi, quidem provident veritatis consequatur et quae deleniti pariatur fugiat! Rem, soluta atque est vel tempore maxime?
    A, tempora? Fugit cum facere porro consequatur magni in harum nemo ad, aperiam molestiae culpa minima nulla suscipit quisquam ut vero autem iste quae ipsam a illum omnis rerum ex.
    Odit laborum earum dolore quasi neque, dignissimos, nobis dolor mollitia, dolorem ad accusantium at cumque quo perferendis id voluptatibus. Temporibus alias facilis a ab velit quaerat aliquid dolores saepe mollitia?
    Accusamus sunt illum mollitia animi? Fuga cumque nemo libero dignissimos, doloribus eos, fugit id officia, ipsa illum modi excepturi. Illo explicabo error dignissimos neque nesciunt. Itaque commodi asperiores consequatur ad.
    Nam cupiditate quia dolor repudiandae ea. Ducimus quod iusto sed, voluptatum ipsa itaque consequatur aperiam laborum a suscipit aliquam ad distinctio veritatis, vel sint odio aut impedit nulla eligendi tenetur!
    Velit, labore perferendis sed laudantium perspiciatis nulla aliquam debitis dolorem? Distinctio perferendis porro dolorum itaque temporibus nesciunt maiores, nihil accusamus, et consectetur, voluptas non ullam cum? Inventore distinctio eveniet omnis.
    Sequi veniam labore adipisci placeat repellendus quam sint officia nulla ipsam delectus temporibus id eum quasi tempore, praesentium itaque dicta ducimus porro quia blanditiis quis. Assumenda, at repellat. Commodi, nemo.
    Recusandae dolorem repellat reiciendis consequuntur nemo vero eius sit consectetur corporis, pariatur debitis perspiciatis possimus dicta quae autem! Exercitationem ipsa quod doloremque neque ipsam dolorem, assumenda modi cumque error vel?
    Quam aperiam fuga commodi cupiditate illum esse doloribus, eveniet eos quisquam. Quia qui, ullam minus laborum voluptas aut nisi illo tempora, magnam voluptatem esse ipsum, reprehenderit molestiae explicabo mollitia expedita.
    Eum labore quaerat nemo placeat est ducimus laboriosam cum sapiente odio, nulla, doloremque tempora ipsam, id sint quos laborum dolorum sunt nobis fuga optio! Maiores beatae quibusdam obcaecati porro hic?
    Similique modi nam possimus excepturi officia. Dolorum porro in saepe expedita consequuntur fugiat quo atque consectetur soluta obcaecati corporis illum unde quia nihil nesciunt voluptas voluptates eligendi laboriosam, eius nemo?
    Voluptas, quis ex doloribus, quo consequatur exercitationem sequi eius minus minima non natus dolor beatae. Voluptatem inventore amet, expedita vitae quisquam corporis numquam cupiditate laboriosam, voluptate repudiandae architecto commodi neque.
    Enim quibusdam deleniti at similique sunt, cupiditate qui sapiente, aut optio ad nihil tempora possimus deserunt sequi autem vitae iusto reprehenderit esse nobis. Necessitatibus accusamus deleniti nesciunt unde, libero nulla!
    Quos labore unde fugit facere? Esse magnam molestias maiores veritatis aliquid nemo cupiditate blanditiis dolorum sed suscipit iusto accusantium, reprehenderit explicabo adipisci quis nulla temporibus. Quis quod repellendus amet recusandae?
</section>
<section class="panel panel2" data-section-name="third"></section>
<section class="panel panel3" data-section-name="fourth"></section>

body, ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

.panel {
    height:100vh;
    overflow-y:scroll;
}
.home {
    background: #6dcb94;
    background: hsl(158, 58%, 52%);
}
.panel1 {
    background: #ec8200;
    background: hsl(28, 100%, 52%);
}
.panel2 {
    background: #64a0d4;
    background: hsl(200, 60%, 55%);
}
.panel3 {
    background: #e14456;
    background: hsl(350, 92%, 59%);
}

.pagination {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.pagination a {
    display: block;
    color: white;
    position: relative;
    padding: 20px;
}

.pagination a.active:after {
    box-shadow: inset 0 0 0 5px;
}

.pagination a .hover-text {
    position: absolute;
    right: 20px;
    top: 50%;
    transform:translateY(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    padding-right: 15px;
    white-space:nowrap;
}

.pagination a:hover .hover-text {
    opacity: 1;
}

.pagination a:after {
    content: "";
    transition: box-shadow 0.5s ease;
    width: 10px;
    height: 10px;
    display: block;
    border: 1px solid;
    border-radius: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

$(function() {
    $.scrollify({
        section:".panel",
        scrollbars:false,
        setHeights:false,
        overflowScroll:false,
        before:function(i,panels) {
            var ref = panels[i].attr("data-section-name");
            $(".pagination .active").removeClass("active");
            $(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active");
        },
        afterRender:function() {
            var pagination = "<ul class=\"pagination\">";
            var activeClass = "";
            $(".panel").each(function(i) {
                activeClass = "";
                if ( i === 0 ) {
                    activeClass = "active";
                }
                pagination += "<li><a class=\"" + activeClass + "\" href=\"#" + $(this).attr("data-section-name") + "\"><span class=\"hover-text\">" + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "</span></a></li>";
            });

            pagination += "</ul>";

            $(".home").append(pagination);

            $(".pagination a").on("click", $.scrollify.move);
        }
    });
});

This Pen is owned by jhs on CodePen.

See more by @jangka44 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.