position: sticky 삽질...

컴포넌트 구조

//index.tsx
<>
<div></div> // 정보와 상관없이 뜨는 컴포넌트 
<div></div> // 플로팅


<div>
  {/* 메인 정보 컴포넌트 구간 */}
</div>
</>


// 플로팅 index.tsx

return (
  <Wrap>
    <div>
      플로팅 박스 
    </div>
  </Wrap>
)

// 플로팅 styled.ts

export const Wrap = styled.div`
  position: relative;
  height: auto;
`;

export const div = styled.div`
  position: sticky;
  top: 0;
  height: 300px;
`;

안움직임.. 이유는 플로팅 자체 컴포넌트가 다른 컴포넌트 height값과 비교해줘야 하는데 내부에서 삽질..Wrap

변화

//index.tsx
<>
<div></div> // 정보와 상관없이 뜨는 컴포넌트 


<Wrap>
<MainWrap>{/* 메인 정보 컴포넌트 구간 */}</MainWrap>
<StickyWrap></StickyWrap> // 플로팅
</Wrap>
</>

//styled.ts

export const Wrap = styled.div`
  display: flex;
`;

export const MainWrap = styled.div`
  height: 3000px; //이게 좀 애매한데 최대한 메인 정보 height 크기만큼 넣어줌 이걸 auto나 퍼센트로 하면 안댐 무튼 StickyWrap보다 커야함 
`;

export const StickyWrap = styled.div`
  position: -webkit-sticky;
  position: sticky;
  height: 523px;
  top: 0;
`;