해당 위치에서 컨텐츠 고정

html

<div id='wrap'>
	<div class='content1'></div>
    <div class='content1'></div>
    <div class='content1'></div>
    <div class='content1'></div>
    <div class='content1 fixed'></div>
    <div class='content1'></div>
    <div class='content1'></div>
    <div class='content1'></div>
    <div class='content1'></div>
</div>

style

  .fixed {
   position: fixed;
   bottom: 0;
  }

 

작동 되어 야 하는 기능

스크롤 하면 fixed 클래스의 컨텐츠가 따라와야 하고

원하는 위치에서 컨텐츠가 고정 되어야 함

 

1차 

 document.addEventListener("scroll", function () {
    const productsList = document.querySelector("#products-list");
    const productItem = document.querySelector(".Nproduct");
    let targetPosition = productsList.getBoundingClientRect().top;
    let windowHeight = window.innerHeight;

    console.log(targetPosition);

    if (targetPosition <= windowHeight) {
      productItem.classList.remove("fixed ");
    } else {
      productItem.classList.add("fixed ");
    }
  });

1. 원하는 위치의 컨텐츠에 id 값을 추가 products-list

2. 클래스가 다 중복되어 있어서 fixed컨텐츠에 다른 클래스를 추가 Nproduct

3. 원하는 위치에서 최상단의 값을 도출 productsList.getBoundingClientRect().top;

4. 브라우저 높이 값 출력

5. targetPosition <= windowHeight 조건에 따라 fixed 추가/제거

문제 사항 스크롤 할 시 클래스가 빠르가 추가 제거 되어서 컨텐츠가 깜빡 거리는 현상 생김

 

 

2차

fixed를 제외 한 위 컨텐츠를 div으로 묶은 후 해당 길이를 계산하여 조건을 걸어 클래서 추가 제거

깜빡거리는 현상 없음

document.addEventListener("scroll", function () {
        const newitem = document.querySelector(".new-content");
        const productItem = document.querySelector(".Nproduct");

        if (newitem && productItem) {
          
          //새로운 div 높이 값
          const newitemHeight = newitem.offsetHeight;
          // console.log(newitemHeight); //4597
          
          // 최상단에서의 div 높이 값 +  스크롤 하는 높이 값
          const newitemTop =
            newitem.getBoundingClientRect().top + window.scrollY;
            
            // console.log(newitem.getBoundingClientRect().top)
            // console.log(window.scrollY);
            
          //스크롤 하는 높이 값 + 전체 높이 값
          const scrollPosition = window.scrollY + window.innerHeight;
          console.log(scrollPosition + "scrollPosition");
          console.log(newitemTop + newitemHeight);
         
          if (scrollPosition >= newitemTop + newitemHeight) {
            productItem.classList.remove("fixed");
          } else {
            productItem.classList.add("fixed");
          }
        }
      });

1. 새롭게 묶은 div 불러오기

2. 클래스가 다 중복되어 있어서 fixed컨텐츠에 다른 클래스를 추가 Nproduct

3. newitem && productItem 가 값이 있는지 여부 확인

4. 새로운 div 높이 값 구하기

5. 최상단에서의 div 높이 값 +  스크롤 하는 높이 값

6. 스크롤 하는 높이 값 + 전체 높이 값

7. (스크롤 하는 높이 값 + 전체 높이 값) >= 최상단에서의 div 높이 값 +  새로운 div 높이 값 보다 작으면

클래서 제거

8. 높으면 클래스 추가