SIR
목록으로

특정 섹션에서 body에 클래스 추가 채택완료

김태후니
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 2,416
답변 2
목록

Copy 
<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개

채택된 답변
+20 포인트

Copy 
$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');
            }
        });
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

#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 값을 조정 하면서 맞추어보세요

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고