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>
답변을 작성하시기 전에 로그인 해주세요.
