특정 섹션에서 body에 클래스 추가 채택완료
김태후니
3년 전
조회 2,280
</p>
<p><div id="company_wrap" class="bg_type_1"></p>
<p> <div id="section_1" class=""></div></p>
<p> <div class="color_bg">
<div id="section_2" class=""></div></p>
<p> <div id="section_3" class=""></div>
</div>
<div id="section_4" class=""></div></p>
<p></div></p>
<p> </p>
<p><script></p>
<p> $(function() {
var $page = $('.color_bg');
var $window = $(window);
var pageOffsetTop = $page.offset().top;</p>
<p> $window.resize(function() {
pageOffsetTop = $page.offset().top;
});</p>
<p> $window.on('scroll', function() {
var scrolled = $window.scrollTop() >= pageOffsetTop;
$('body').toggleClass('blue_bg', scrolled);
});
});</p>
<p></script></p>
<p>
구글링하여 찾은 스크립트를 통해서 구성한 형태입니다.
현재로써는 .color_bg 섹션에 들어가면 body에 클래스 추가까지는 가능했으나,
.color_bg에서 나왔을때는 body에 클래스를 지우게 하고 싶습니다.
스크립트를 어떻게 고쳐야 할까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
</p>
<p> $window.on('scroll', function() {
//var scrolled = $window.scrollTop() >= pageOffsetTop;
//$('body').toggleClass('blue_bg', scrolled);
if ($window.scrollTop() >= pageOffsetTop) {
$('body').addClass('blue_bg');
} else {
$('body').removeAttr('class');
}
});</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
김태후니
3년 전
�
배르만
3년 전
code 상으로 보면 #section_4 는 .color_bg 보다 아래쪽에 위치해 있으니
.color_bg 보다 아래쪽 위치라고 가정할께요.
$window.scrollTop() >= pageOffsetTop // 이 조건은 .color_bg 보다 아래쪽 인지만 판단합니다.
스크롤이 더 아래로 내려갔을때 다시 사라져야 한다면 pageOffsetTop ~ pageOffsetBottom 과 같은 범위를 지정하고 그때만 동작하도록 수정하시면 될것 같습니다.
.color_bg 보다 아래쪽 위치라고 가정할께요.
$window.scrollTop() >= pageOffsetTop // 이 조건은 .color_bg 보다 아래쪽 인지만 판단합니다.
스크롤이 더 아래로 내려갔을때 다시 사라져야 한다면 pageOffsetTop ~ pageOffsetBottom 과 같은 범위를 지정하고 그때만 동작하도록 수정하시면 될것 같습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
뭐가 문제일까용