var 값 지정 시 무한정으로 숫자를 늘릴 수 있나요? ex)var $sec[1씩증가하는 값] =

var 값 지정 시 무한정으로 숫자를 늘릴 수 있나요? ex)var $sec[1씩증가하는 값] =

QA

var 값 지정 시 무한정으로 숫자를 늘릴 수 있나요? ex)var $sec[1씩증가하는 값] =

본문

jquery를 제대로 배운적이 없어서 질문이 좀 난해한점 미리 사과드립니다 ㅠ

 


$(window).bind("scroll", function() {
       var $sec1 = $('.wrap.sub1_1 .contents > div:nth-child(1)').offset().top;
       var $sec2 = $('.wrap.sub1_1 .contents > div:nth-child(2)').offset().top;
       if ($(this).scrollTop() < $sec2){
         $(".wrap.sub1_1 .contents > div:nth-child(1)").addClass("active");
         $(".wrap.sub1_1 .contents > div:nth-child(1)").siblings().removeClass("active");
       }
       if ($(this).scrollTop() > $sec2 & $(this).scrollTop() < $sec3){
         $(".wrap.sub1_1 .contents > div:nth-child(2)").addClass("active");
         $(".wrap.sub1_1 .contents > div:nth-child(2)").siblings().removeClass("active");
       }
     });

 

스크롤에 따라 active라는 코드를 붙이고 벗어나면 지우는 그런 작업을 하고있는데요.

현재 섹션이라 칭하는 영역은 20개지만 늘어날 수도 있습니다.

지금 공통적으로 숫자가 증가하는 부분이  var $sec [숫자] , div:nth-child([숫자])인데..

소스를 조금 심플하게 만질 방법은 없을까요?

 

힌트라도 감사합니다 

이 질문에 댓글 쓰기 :

답변 1

그냥 제 스타일대로 해봤는데, 수치나 이런거 좀 수정해보시면 어떨지 해서 올려드립니다. 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
    html, body {margin:0;}
    #content div {height:600px;background-color:gray;}
    #content div.active {background-color:black;}
</style>
<div id="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<script type="text/javascript">
    $(window).bind('scroll', function() {
        var st = $(window).scrollTop();
        var curPos;
        $('#content div').each(function(idx, el) {
            if (st >= $(this).offset().top) {
                curPos = idx;
            }
        });
        if (!$('#content div').eq(curPos).hasClass('active')) {
            $('#content div').removeClass('active').eq(curPos).addClass('active');
        }
    });
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 109,735 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT