국비지원 76일차 (개인프로젝트 - 화면구성 스크롤구현)

@ 오늘은 개인프로젝트로 SNS 를 시작하게되었는데 우선 화면을 구현하게됬다. 인스타그램같은걸 참조하는관계로 

구성이 비슷하게된것같다.

오늘 메인페이지를 구현하기시작하였고, 여기서 핵심인 본문영역에 오른쪽섹션이 마우스 스크롤이 내려옴에 따라서 같이 내려오게끔 해주려고 했다.

맨처음에 FIXED를 쓰니 트러블이 많은관계로 ABSOULTE 를 써서 구현해보았다.

 

@ 메인페이지 -구현(스크롤)

 

-> 위 화면과 같이 스크롤 움직임에따라 오른쪽 섹션이 같이 따라 움직이는걸 볼수있다.

우선 본문에 position:realtive 를 주고 오른쪽 섹션에 position:absolute 를 주고 left:0 을 하면 왼쪽그림과같이 위치할것이다.

이제 스크롤에 따라  오른쪽 섹션이 같이 이동하게 구현하려면 script를 사용해야될것이다.

 

@페이지가 로드 될때

-> 오른쪽섹션에 현재위치에 offset().top 값을 구해놓고 시작해야한다. 이걸 먼저 안구해놓고 시작하면 스크롤 이벤트가 시작할때 오른쪽섹션은 위에 헤더부분에 부분까지 포함하지않고 이동하게될것이고, 그렇게 이동하면 계산한것보다 헤더높이만큼 아래로 못미치게 이동하게될것이다.

 

@스크롤이 이동할때

1. 윈도우의 scrollTop() 값을구해놓는다.

( 현재 브라우저 창의 상단에서부터 스크롤바가 떨어져 있는 거리를 반환합니다. 즉, 창의 현재 스크롤 위치를 나타냅니다.)

 

2. 오른쪽 섹션의 화면에서부터 섹션하단까지 높이를 구해야된다.

먼저 오른쪽섹션에 offset().top값을구하고 , 해당섹션에.height() 높이값을 구한다 그리고 .위에 scrilltop() 구한값을 다 더해준다.(이렇게하면 화면에 아래로 이동함에있어 오른쪽섹션의 아래로 얼마나 이동됬는지 알수있을것이다.)

 

3. 맨아래 footer부분의 offset().top 값을 구해주고 if문을써서 위에서구한 오른쪽섹션 이동한거리가 footer의 offset.top값 보다 작으면 오른쪽섹션 의 top은 window.scrollTop() 만큼 이동하게 해줄것이다. 그러면 footer의 부분에 같아지면 더이상 밑으로 내려가지않을것이다. 그리고 다시 마우스를 위오 올릴떄 footer의offset.top값보다 작아지면 오른쪽섹션은 마우스따라 위로 올라갈것이다.

 

<script>

    // section_r를 스크롤 이동

    $(document).ready(function(){

        let section_o_top = $(".section_r").offset().top ;

       

        $(window).scroll(function(){

            let s_top = $(window).scrollTop();

            let section_r_bottom = (s_top + section_o_top) + $(".section_r").height() ;

            let f_o_top = $(".footer").offset().top ;

console.log($(".section_r").offset().top)

            // console.log(f_o_top, section_r_bottom + 100)

            if(f_o_top > section_r_bottom) {

                console.log(111)

                $(".section_r").css({

                    top: s_top

                })

            }

        });  

    })

       

   </script>