BLOG
Html,Css,JavaScript

Position: sticky 를 이용해 자바스크립트 없이 플로팅 메뉴 만들기

Nov. 9, 2021, 11:53 p.m.

블로그나 쇼핑몰 사이트를 들어보면 측면에 카테고리나 검색창등이 있는 메뉴를 볼 수 있습니다. 이 메뉴들은 스크롤을 내려도 따라서 내려오면서 언제든 클릭할 수 있게 구현이 되어있는데요, 이번 포스팅에서는 이 기능을 아주 간단하게 구현하는 방법을 알아보겠습니다.

보통 이 플로팅 메뉴는 자바스크립트로 많이 구현하는데요, 단순히 style을 이용해서도 구현할 수 있습니다.

바로 Position: sticky; 속성을 이용하면 됩니다. 이 속성을 이용하면 해당 엘리먼트는 스크롤을 내려도 항상 그 위치에 고정됩니다. 그럼 아래와 같이 만들면 간단한 플로팅 메뉴를 구현할 수 있겠네요!

<div class="quickmenu" style="position: sticky;  top:80px;">
    <div class="card my-4">
    <h5 class="card-header">Search</h5>
        <div class="card-body">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for..." id="search-input">
                <span class="input-group-btn">
                    <button class="btn btn-dark" type="button" onclick="searchPost();">Go!</button>
                </span>
            </div>
        </div>
    </div>
</div>

제 블로그의 검색 메뉴 코드입니다. Bootstrap4로 디자인되었습니다!

top:80px;를 통해 맨 위에 navbar같은 요소들과 겹치지 않게 했습니다. 또한 이런 플로팅 메뉴들은 측면에 위치하고 있으므로 이 div 전체를 새로운 div로 감싸서 위치를 조정하면 됩니다. Bootstrap의 그리드를 이용하면 쉽게 할 수 있습니다.

<div class="container my-3" >
    <div class="row">
        <div class="col-md-8 col-lg-9">
            (메인 콘텐츠 div)
        </div>      
        <div class="col-md-4 col-lg-3">     
            (플로팅 메뉴 div)
        </div>
    </div>
</div>

부트스트랩을 이용하면 쉽게 플로팅 메뉴를 측면으로 보낼 수 있답니다. (플로팅 메뉴 div)라고 쓰여진 부분에 앞에 나온 플로팅 메뉴 div를 넣어주세요!

이렇게 구현한 결과는 바로 오른쪽 제 블로그 플로팅 메뉴에서 확인해 볼 수 있답니다.(모바일은 맨 아래)

Html Css Bootstrap

Html,Css,JavaScript 의 다른 글 보기
Search