스크롤 따라다니는 메뉴 디바이스 크기마다 설정 질문드립니다ㅠㅠ
본문
영카트에 있는 오늘 본 상품에 있는 스크롤 따라다니는 스크립트를 쓰려고 하는데요,
따라다닐 메뉴를 화면 맨 위로 붙였더니 반응형으로 줄였을때 위로 너무 올라가서 보이질 않더라구요..
반응형 크기에 따라 따라다니는 높이를 스크립트 변경해서 바꾸려고 하는데 어려워서 질문 올립니다..
작아지기 전에는 저기 써있는 980로 있다가
width가 610px 보다 작을때에는
저 980이라고 써있는 부분의 높이를 바꾸고 싶은데요..
//스크롤이벤트가 발생하면
$(window).scroll(function(){
yPosition = $win.scrollTop() - 980;
if (yPosition < 0)
{
yPosition = 0;
}
$layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
});
});
도움 부탁드립니다!ㅠㅠ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $win = $(window);
var top = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
/*사용자 설정 값 시작*/
var speed = 00; // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)
var easing = 'linear'; // 따라다니는 방법 기본 두가지 linear, swing
var $layer = $('#stv_list'); // 레이어 셀렉팅
var layerTopOffset = 0; // 레이어 높이 상한선, 단위:px
$layer.css('position', 'absolute');
/*사용자 설정 값 끝*/
// 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해
if (top > 0 )
$win.scrollTop(layerTopOffset+top);
else
$win.scrollTop(0);
//스크롤이벤트가 발생하면
$(window).scroll(function(){
yPosition = $win.scrollTop() - 980;
if (yPosition < 0)
{
yPosition = 0;
}
$layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
});
});
</script>
답변 1
제가 팁자료실에 올렸던 내용이 있습니다.
콘테이너 안에서 배너 위치 설정하는것인데요.
너무 위로 올라간다면 div의 포지션 문제니 자바스크립트로 높이를 계산하여 그때그때 새로운
포지션을 잡는 방법보다 저 팁처럼 퍼블리싱이 된것을 고쳐서 움직일 범위를 1차로 정하고
자바스크립트를 그에 맞게 원점에서 다시 작업하시는게 현명한 방법인것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
