화면 상단에 부드럽게 고정

발견 discovery

화면 상단에 부드럽게 고정

s740ag 2016. 2. 26. 08:52

// 현재 스크롤바의 위치를 저장하는 변수 (단위: px)
var currentScrollTop = 0;

// 비동기식 jQuery이므로 window load 후 jQuery를 실행해야 함
window.onload = function() {
    // 새로고침 했을 경우를 대비한 메소드 실행
    scrollController();

    // 스크롤을 하는 경우에만 실행됨
    $(window).on('scroll', function() {
        scrollController();
    });
}

// 영역의 위치를 설정한 위치에서 부드럽게 고정시킴 - 시작
function scrollController() {
    currentScrollTop = $(window).scrollTop();

    if (currentScrollTop < 90) {
        $('#adsTop').css('top', -(currentScrollTop));
        $('#header').css('top', 92 - (currentScrollTop));
    } else {
        $('#adsTop').css('top', -90);
        $('#header').css('top', 2);
    }
}

자바스크립트 소스코드

/* 광고 - 위치: 상단 */
#s740_adsTop {
    position: fixed;
    top: 0 px;
    left: 0 px;
    width: 100 % ;
    height: 92 px;
    margin: 0 px auto;
    background - color: black;
    text - align: center;
    overflow: hidden;
    z - index: 10001;
}

/* 헤더 */
#header {
    position: fixed;
    top: 92 px;
    left: 0 px;
    width: 100 % ;
    background - color: #F0F0F0;
    text - align: center;
    z - index: 10001;
}

스타일 (CSS) 소스코드

- 위치를 고정시키고자 하는 영역 위 영역과 고정시키려는 영역 모두 position을 fixed로 지정해야 함

- #s740_adsTop이 고정 영역 위 영역, #header가 지정한 위치에서 부드럽게 고정되는 영역임

참고 블로그 화면 상단에 부드럽게 고정되는 메뉴를 만드는 방법 / CSS transition 활용 - Erzsamatory Weblog

담백하게. 괜찮은 방향으로. 오늘은

오늘은 추천 페이지 건너뛰기

000.

최근삼개월 오늘은인기Twenty - 베스트

최근영개월 오늘은추천Twenty - 추천추천

최근영개월 오늘은주요Forty - 다좋아하지만 그중에서좀더좋아하는

000.

오늘은 블로그를 방문해 주셔서 감사합니다.

오늘은 블로그 (http://www.s740abcdefg.com/)는, PC에서 더 많은 기능과 정보를 제공합니다. 감사합니다.