SPSTRAP Document API

Scroll Event

Follow Fix

<style>
                                .sp--sample-follow {
                                    width: 200px;
                                    top: 200px;
                                    right: 20px;
                                    padding: 30px;
                                    z-index: 1;
                                    position: absolute;
                                    background :#f0cece;
                                }
                                .sp--sample-follow.sp--scroll-on {
                                    position: fixed;
                                    top: 20px;
                                }
                            </style>
                            <div class="sp--scroll sp--sample-follow"
                                data-fix="180"  // 컨텐츠 위치와 관계없이 상단에서 180px이 되면 작동한다.
                            >
                                <div class="sp--title" scale="2xl-nude">
                                    <div class="sp--title-inner">
                                        Follow Fix
                                        <p class="sp--title-subtext">Lorem ipsum dolor sit amet</p>
                                    </div>
                                </div>
                                <hr class="sp--hr" theme="dark" figure="band-left" space="md" />
                                네번째 스크롤 ( 상단에서 100px 내려오면 무조건 실행한다. )
                                홀더가 필요하지 않다.
                            </div>

Scroll Element position fix

<style>
                                .sp--sample-fixnav {
                                    position: absolute;
                                }
                                .sp--sample-fixnav.sp--scroll-on {
                                    position: fixed;
                                }
                            </style>
                            <div class="sp--scroll sp--sample-fixnav" style="padding:30px;background:#eaeaea;"
                                data-top="0"
                                data-holder="true"
                            >
                                첫번째 스크롤
                            </div>
                            <p class="sp--scroll-holder"></p>                           // 스크롤 트릭 홀더 ( 부드러움을 위함 )
                            <img src="https://placeholder.pics/svg/1400x400/aaaaaa/fff">
                            
                            <div class="sp--scroll sp--sample-fixnav" style="padding:30px;background:#7f67ac;"
                                data-top="82"
                                data-holder="true"
                            >
                                두번쨰 스크롤 ( top 74px )
                            </div>
                            // 폴더가 없어도 data-holder="true" 옵션으로 홀더를 넣어줄 수 있다.
                            <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">

Scroll Vertical Navigation

<style>
                                .sp--sample-navigation {
                                    top: 50%;
                                    right: 10px;
                                    position: fixed;
                                }
                                .sp--sample-navigation a {
                                    color: #333;
                                    display: block;
                                }
                                .sp--sample-navigation a.sp--scroll-btn-on {
                                    color: #ff3300;
                                }
                            </style>
                            
                            <div class="sp--document-box">
                                <div class="sp--document-subject">Scroll Navigation</div>
        
                                <div class="sp--sample-navigation"></div>
                                <div class="sp--scroll" 
                                    data-navigation=".sp--sample-navigation"
                                    data-navname="네비게이션 1"
                                >
                                    <div class="sp--title" theme="center" scale="2xl">
                                        <div class="sp--title-inner">
                                            <hr class="sp--hr" space="lg" />
                                            <strong>Menu 1 Section</strong>
                                            <p class="sp--title-subtext">sub description</p>
                                            <hr class="sp--hr" theme="tick-medium-center-diagonal" space="lg" />
                                        </div>
                                    </div>
                                    <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                </div>
                                <div class="sp--scroll" 
                                    data-navigation=".sp--sample-navigation"
                                    data-navname="네비게이션 2"
                                >
                                    <div class="sp--title" theme="center" scale="2xl">
                                        <div class="sp--title-inner">
                                            <hr class="sp--hr" space="lg" />
                                            <strong>Menu 2 Section</strong>
                                            <p class="sp--title-subtext">sub description</p>
                                            <hr class="sp--hr" theme="tick-medium-center-diagonal" space="lg" />
                                        </div>
                                    </div>
                                    <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                </div>
                                <div class="sp--scroll" 
                                    data-navigation=".sp--sample-navigation"
                                    data-navname="네비게이션 3"
                                >
                                    <div class="sp--title" theme="center" scale="2xl">
                                        <div class="sp--title-inner">
                                            <hr class="sp--hr" space="lg" />
                                            <strong>Menu 3 Section</strong>
                                            <p class="sp--title-subtext">sub description</p>
                                            <hr class="sp--hr" theme="tick-medium-center-diagonal" space="lg" />
                                        </div>
                                    </div>
                                    <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                </div>
        
                            </div>

Class

name	description
.sp--scroll	스크롤 이벤트가 적용될 엘리먼트 지정

Attribute

name	description
data-top	default : 0 이 요소를 만나기 까지의 갭을 줄여준다. 만약 상단에 이 요소보다 먼저 보여야 할 부분이 있다면 사용하자.

Setting

Etc

data-top 에 값을 줄 경우, 위쪽 엘리먼트의 높이를 정확하게 지정해주자.