[jQuery] 따라다니는플로팅 배너 제작[jQuery] 따라다니는플로팅 배너 제작

Posted at 2018. 4. 23. 10:07 | Posted in JavaScript & jQuery/jQuery
반응형




■ CSS :: position 속성을 이용한 쫒아다니는 윙 배너 제작




#01 position : static

 -. static은 기본값이다.
 -. position:static;이 설정된 엘리먼트는 위치가 지정된 것이 아니다.
 -. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며
 -. static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현한다.



#02 position : fixed

 -. 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다.
 -. top이나 right, bottom, left 프로퍼티가 사용된다.




# 소스코드

<html>
<head>
<title>:: 따라오는 스크롤 배너 ::</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
    .frame {
        width:1140px;
        margin-left:auto;
        margin-right:auto;
    }

    .main {
        float:left;
        margin-right:10px;
        width:780px;
        height:5000px;
    }

    .box { width:100%;height:1000px; }
    .box:nth-child(1) { background-color:#FF9933; }
    .box:nth-child(2) { background-color:#66CCCC; }
    .box:nth-child(3) { background-color:#9933CC; }
    .box:nth-child(4) { background-color:#006699; }
    .box:nth-child(5) { background-color:#FF00FF; }

    .banner {
        float:left;
        background-color:#CCCCCC;
        width:350px;
        height:5000px;
    }

    #chase {
        width:300px;
        overflow:hidden;
        margin-top:10px;
        margin-left:10px;
        margin-right:10px;
        margin-bottom:10px;
    }

    #chaseImg {
        width:100%;
    }

    #chaseBar {
        width:100%;
        background-color:#000000;
        color:#FFFFFF;
        font-weight:bold;
        text-align:center;
    }
</style>
<script type="text/javascript">
jQuery(window).scroll(function() {


    // 브라우저 화면 스크롤의 현재 높이가 플로팅 배너의 높이보다 클경우

    if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {


        jQuery("#chase").css("position", "fixed");

    }


    // 브라우저 화면 스크롤 현재 높이가 플로팅 배너의 높이보다 작을경우

    else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {


        jQuery("#chase").css("position", "static");

    }
}); 
</script>
</head>
<body>
    <div class="frame">
        <div class="main">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
        <div class="banner">
            <div id="chase">
                <img src="./maxim.jpg" id="chaseImg"/>
                <div id="chaseBar">새해 福덩이 안지현</div>
            </div>
        </div>
    </div>
</body>
</html>




# 출력결과





반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] SNS 공유 팝업창 제작(심화)  (0) 2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
[jQuery] 선택 날짜를 태그로 생성하는 모듈  (0) 2018.04.19
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기  (2) 2018.03.22
[jQuery] AJAX를 사용한 파일 업로드  (1) 2018.03.18
//

티스토리툴바