sticky > 그누보드5 팁자료실

그누보드5 팁자료실

sticky 정보

sticky

본문

오늘 노마드코더에서 본건데 꿀팁이네요

position: sticky;

아래 코드 실행해서 스크롤 해보세요

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html, body {

            margin: 0;

            padding: 0;

        }

        header {

            background: #0f0;

            line-height: 100px;

            text-align: center;

        }

        nav {

            background: #0af;

            top: 0;

            position: sticky;

            line-height: 30px;

            text-align: center;

        }

        .main {

            background: #1a1;

            height: 2000px;

            text-align: center;

        }

        footer {

            background: #834;

            text-align: center;

        }

    </style>

</head>

<body>

    <header>

        header

    </header>

    <nav>

        nav

    </nav>

    <div class="main">

        aaaa

    </div>

    <footer>

        Footer

    </footer>

</body>

</html>

추천
3

댓글 3개

전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT