🕹 스크립트

스크롤 스크립트

(。θᗨθ。) 2022. 3. 7. 00:46
//scroll
  const breadcrumb = $(".bcs #breadcrumb li");
  const bcsSection = $(".bcs main section");
      
  breadcrumb.click(function(){
    let i=$(this).index();
    // console.log(i);
    let tg=bcsSection.eq(i);
    let tt=tg.offset().top;
    $("html, body").animate({
        scrollTop: tt - 180
    },500);
    // alert(tt);
    return false; 

  });

  $(window).scroll(function(){
    let st=$(window).scrollTop(); //스크롤 위치
    let bt=$(document).height()-$(window).height();
  
    if(st >= 90){
      header.addClass('scroll');
    } else {
      header.removeClass('scroll');
    }; 
  
    bcsSection.each(function(){
      let i=$(this).index();
      let tt=$(this).offset().top;
      if(st >= tt - 180){
          breadcrumb.removeClass("on"); //스크롤했을때 메뉴 색 변경
          breadcrumb.eq(i).addClass("on");
      };
      if(st==bt){
          breadcrumb.removeClass("on");
          breadcrumb.eq(i).addClass("on");
      };
    });    
  });

  • 같은 함수 여러번 써야할 때
//스크롤제어 + manage
    const manageBCR = $('#manage #breadcrumbs li')
    const manageGNB = $('.gnb li:nth-child(3) .dep2 li, #sitemap li:nth-child(3) .dep2 li')
    const manageSect = $('#manage .sub-body section');
    
    // function manageClick(){
    //     let i = $(this).index();
    //     let tg = manageSect.eq(i);
    //     let tt = tg.offset().top;
    //     $("html, body").animate({
    //         scrollTop: tt - 250
    //     }, 500);
    //     return false; 
    // }
    // manageGNB.click(manageClick);
    // manageBCR.click(manageClick);

    function manageClick(mc){
        mc.click(function(){
        let i = $(this).index();
        let tg = manageSect.eq(i);
        let tt = tg.offset().top;
        $("html, body").animate({
            scrollTop: tt - 260
        }, 500);
        return false; 
        })
            
    };

    manageClick(manageBCR);
    manageClick(manageGNB);
728x90