CJ onstyle

seungyeon·2024년 11월 8일

portfolio

Portfolio_Code Review

목록 보기

3/9

CJ onstyle

사이트명 : CJ onstyle
사용언어 : HTML, CSS, JS
사용플러그인 : Swiper
분류 : 적응형 Mobile, 클론코딩

1. Header scroll

배경이 투명 상태였다가 스크롤 내리면 배경색이 생김, 높이가 줄어듬, 다시 올라갈때는 원래 높이로 돌아감

// header scroll nav 
let lastScroll = 0;

$(window).scroll(function () { 
  curr = $(this).scrollTop();

  if(curr == 0){
    $('#header').removeClass('white');
  }
  if(curr >= 50){
    $('#header').addClass('white');
    if (curr > lastScroll) {
      $('#header').addClass('hide');
      $('.sc-benefitprice .group-tabmenu').removeClass('up');
      $('.sc-category .group-tabmenu').removeClass('up');
    } else {
      $('#header').removeClass('hide');
      $('.sc-benefitprice .group-tabmenu').addClass('up');
      $('.sc-category .group-tabmenu').addClass('up');
    }
  }
  
  lastScroll = curr;
});

현재 스크롤 값은 변수 curr로 지정한다.

투명 배경, 흰색 로고

  if(curr == 0){
    $('#header').removeClass('white');
  }

원 상태를 흰색 배경과 보라색 로고로 해두고,
스크롤 값이 0일때 #header에게 .white를 제거해서 투명 배경, 흰색 로고 상태로 만들어준다.

스크롤 값이 50이 넘어가거나 같을때 #header에게 .white를 추가해준다.
🌟 이때(2.) 아래로 스크롤 중이라면 #header 윗 부분을 사라지게 한다.
🌟 이때(2.) 아래로 스크롤 중이 아니라면 #header가 온전히 다 보이도록 한다.
마지막으로 lastScroll값이 curr값이랑 같게 만들어서 스크롤이 아래로 내려가고 있는지 방향을 확인하도록 도와주게 하면 된다.

해당 섹션 도달 시 메뉴가 상단에 붙어있고,
스크롤 시 해당 부분 도달하면 포인트가 되도록 하기

해당 섹션 도달 시 메뉴가 상단에 붙어있도록 하기

🌟 header 스크롤 할때 사용한 상태 변경 가능한 코드를 사용해서 해당 섹션에 도달했을때 .on이 되도록 했다.
일단 tabmenu에 {position:sticky;top:0;}를 줘서 상단에 붙도록 했는데, 스크롤 내렸을 때의 header 높이가 50px;정도 되므로 top값을 50px;로 줬다.
여기서 문제점이 있는데, 스크롤을 올렸을때 header 높이가 좀더 커지기 때문에 tabmenu가 가려지게 된다.

if(curr >= 50){
    $('#header').addClass('white');
    if (curr > lastScroll) {
      $('#header').addClass('hide');
      $('.sc-benefitprice .group-tabmenu').removeClass('up');
      $('.sc-category .group-tabmenu').removeClass('up');
    } else {
      $('#header').removeClass('hide');
      $('.sc-benefitprice .group-tabmenu').addClass('up');
      $('.sc-category .group-tabmenu').addClass('up');
    }
  }

🌟 그래서 아까 사용한 스크롤의 방향에 따라 #header의 높이가 달라지도록 만든 코드 밑에 한줄 추가하면 tabmenu도 #header 밑으로 붙게 된다.

.up {
	top: 97px;
}

탭메뉴에 해당하는 콘텐츠 도달 시 point주기

보통의 탭메뉴는 클릭하면 point되고, 콘텐츠가 나왔기 때문에
스크롤하면 그에 맞는 탭메뉴에 point되는 유형은 처음으로 시도해보게 되었다 😃

// sc-category tabmenu scroll active
const tabMenus2 = $('.sc-category .group-tabmenu .tabmenu'); 
const tabContents2 = $('.sc-category .group-tabcontent .con'); 

$(window).on('scroll', function () {
  const scrollPosition = $(window).scrollTop(); 
  
  tabContents2.each(function () {
    const sectionTop = $(this).offset().top; 
    const sectionHeight = $(this).outerHeight(); 

    if (scrollPosition >= sectionTop - 50 && scrollPosition < sectionTop + sectionHeight - 50) {
      const targetId = $(this).attr('id'); 
      const targetMenu = $(`.sc-category .group-tabmenu .tabmenu[href="#${targetId}"]`);

      tabMenus2.removeClass('active');
      targetMenu.addClass('active');
    }
  });
});

탭메뉴 콘텐츠의 top, height를 구하고,
스크롤값이 해당 콘텐츠의 위에 값보다 조금 더 높을때부터 콘텐츠가 끝날때까지 탭메뉴에 point 클래스인 .active를 추가하거나 제거하면 된다.

-> 생각하는 거보단 쉬운 유형이었당 😆

3. Swiper grid

슬라이드 아이템을 그리드 형태로 정렬

// js
// sc-nav swiper slide
const navSlide = new Swiper('.sc-nav .swiper',{
  slidesPerView: 'auto',
  grid: {
    rows: 2, 
    fill: 'row',
  },
  spaceBetween: 12,
});