반응형
저장/ 일괄삭제 버튼을 쇼핑몰 카트 처럼 따라다니게 만들어야했다.
스크롤의 위치를 이용하여 박스를 옮기는 방식.
사용자가 원하는 설정만 입력하면 바로 사용가능.
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});
});
});
자주 쓸일있을것같아서 적어놓는다...!
반응형
'Javascript(Jquery)' 카테고리의 다른 글
[Javascript] 원하는 위치로 스크롤 자동으로 이동 (0) | 2021.04.22 |
---|---|
[Javascript] 파일업로드 이미지, 비디오 파일 Validation (0) | 2021.04.09 |
[Javascript] Javascript Object객체 순서 정렬 (0) | 2021.02.05 |
YoutubeLink Validation Check 정규식 (0) | 2021.01.22 |
[Javascript] Prototype 이란? 개념 - 수정필요 (0) | 2021.01.05 |