기술 정리/Vue

[Vue] position:sticky로 스크롤에 따라오는 창 만들기

Treejin 2021. 2. 5. 16:14
반응형

홈핏챌린지 프로젝트 중 인프런의 강의 내용 페이지에서 본 레이아웃을 따라해보았다.

 

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original) - 인프런

이미 6000명 이상이 학습하고 만족한 최고의 프로그래밍 입문 강의. 인프런이 비전공자 위치에서 직접 기획하고 준비한 프로그래밍 입문 강의로, 프로그래밍을 전혀 접해보지 못한 사람부터 실

www.inflearn.com

 

PC버전의 인프런 홈페이지에서는 우측의 수강신청 화면이 스크롤에 따라 화면에 고정된 듯이 따라 움직인다.

이를 따라 구현해보았다.

 

template
<div class="row col-11 col-lg-8 mx-auto">
      <div class="col-12 col-lg-8 info-main">
        <!--설명부분-->
      </div>

      <div class="col-12 col-lg-4">
        <div class="info-float">
            <b-button id="apply-button">참가하기</b-button>
        </div>
      </div>
</div>

bootstrap-vue의 Grid System을 이용해 화면을 크게 8:4로 나누었고(col-lg-8, col-lg-4),

col-lg-4부분에 고정창을 구현했다.

 

.info-float{
        top:150px;
        position:sticky;
        background-color: white;
        border-radius: 10px;
        margin-top: 20px;
        box-shadow:0 2px 4px 1px rgba(39, 44, 56, 0.2);
 }

position:sticky로 화면 일정 부분에 고정시켰고, top:150px을 통해 화면상단으로부터 150px아래인 위치에 떠다니도록 했다.

반응형