특정 섹션에서 body에 클래스 추가
본문
<div id="company_wrap" class="bg_type_1">
<div id="section_1" class=""></div>
<div class="color_bg">
<div id="section_2" class=""></div>
<div id="section_3" class=""></div>
</div>
<div id="section_4" class=""></div>
</div>
<script>
$(function() {
var $page = $('.color_bg');
var $window = $(window);
var pageOffsetTop = $page.offset().top;
$window.resize(function() {
pageOffsetTop = $page.offset().top;
});
$window.on('scroll', function() {
var scrolled = $window.scrollTop() >= pageOffsetTop;
$('body').toggleClass('blue_bg', scrolled);
});
});
</script>
구글링하여 찾은 스크립트를 통해서 구성한 형태입니다.
현재로써는 .color_bg 섹션에 들어가면 body에 클래스 추가까지는 가능했으나,
.color_bg에서 나왔을때는 body에 클래스를 지우게 하고 싶습니다.
스크립트를 어떻게 고쳐야 할까요?
답변 2
$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');
}
});
#section_4로 내려왔을때 body에 클래스가 안사라집니당.
뭐가 문제일까용
code 상으로 보면 #section_4 는 .color_bg 보다 아래쪽에 위치해 있으니
.color_bg 보다 아래쪽 위치라고 가정할께요.
$window.scrollTop() >= pageOffsetTop // 이 조건은 .color_bg 보다 아래쪽 인지만 판단합니다.
스크롤이 더 아래로 내려갔을때 다시 사라져야 한다면 pageOffsetTop ~ pageOffsetBottom 과 같은 범위를 지정하고 그때만 동작하도록 수정하시면 될것 같습니다.
var scrolled = $window.scrollTop() >= pageOffsetTop && $window.scrollTop() <= $("#section_4").offset().top -200;
section의 크기에 따라 -200 값을 조정 하면서 맞추어보세요
답변을 작성하시기 전에 로그인 해주세요.