Javascript(Jquery)

[Javascript] 스크롤을 따라다니는 박스 만들기

Jeong Jeon
반응형

저장/ 일괄삭제 버튼을 쇼핑몰 카트 처럼 따라다니게 만들어야했다.

스크롤의 위치를 이용하여 박스를 옮기는 방식.

 

사용자가 원하는 설정만 입력하면 바로 사용가능.

 

1. javascript.Js

$(function(){
    var $win = $(window);
    var top = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환

    /*사용자 설정 값 시작*/
    var speed          = 500;     // 따라다닐 속도 : "slow", "normal", or "fast" or        numeric(단위:msec)
    var easing         = 'linear'; // 따라다니는 방법 기본 두가지 linear, swing
    var $layer         = $('.save-delete-btn-div'); // 레이어 셀렉팅
    var layerTopOffset = 650;   // 레이어 높이 상한선, 단위:px
    $layer.css('position', 'absolute');
    $layer.css('top', '1500px'); //첫 시작 위치
    /*사용자 설정 값 끝*/

    // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해
    if (top > 0 )
        $win.scrollTop(layerTopOffset+top);
    else
        $win.scrollTop(0);

    //스크롤이벤트가 발생하면
    $(window).scroll(function(){
        yPosition = $win.scrollTop() + layerTopOffset;
        if (yPosition < 0)
        {
            yPosition = 0;
        }
        $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
    });
});

 

자주 쓸일있을것같아서 적어놓는다...!

반응형