스크롤 따라다니는 메뉴 디바이스 크기마다 설정 질문드립니다ㅠㅠ

스크롤 따라다니는 메뉴 디바이스 크기마다 설정 질문드립니다ㅠㅠ

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

스크롤 따라다니는 메뉴 디바이스 크기마다 설정 질문드립니다ㅠㅠ

본문

영카트에 있는 오늘 본 상품에 있는 스크롤 따라다니는 스크립트를 쓰려고 하는데요,

따라다닐 메뉴를 화면 맨 위로 붙였더니 반응형으로 줄였을때 위로 너무 올라가서 보이질 않더라구요..

반응형 크기에 따라 따라다니는 높이를 스크립트 변경해서 바꾸려고 하는데 어려워서 질문 올립니다..

 

작아지기 전에는 저기 써있는 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

히치하이킹님의 답변

제가 팁자료실에 올렸던 내용이 있습니다.

 

https://sir.kr/g5_tip/8489

 

콘테이너 안에서 배너 위치 설정하는것인데요.

너무 위로 올라간다면 div의 포지션 문제니 자바스크립트로 높이를 계산하여 그때그때 새로운

포지션을 잡는 방법보다 저 팁처럼 퍼블리싱이 된것을 고쳐서 움직일 범위를 1차로 정하고

자바스크립트를 그에 맞게 원점에서 다시 작업하시는게 현명한 방법인것 같습니다.

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 61,188 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 모던웹사이트제작, HTML5 CSS3

    참여17 회 시작18.05.23 09:55 종료18.05.28 09:55

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT