AI_Video_LP/static/js/progress.js

$(document).ready(function () {
  $('.progress-item span').click(function () {
    let className = $(this).attr("class").split(' ')[0];
    // 錨點
    $('html,body').animate({ scrollTop: $(`#${className}`).offset().top }, 300);

    let percent = '';

    if (className === "journey") {
      percent = '20'
    } else if (className === "team") {
      percent = '40'
    } else if (className === "ai-ad") {
      percent = '60'
    } else if (className === "seo") {
      percent = '80'
    } else if (className === "ai-video") {
      percent = '100'
    }

    // if (className === "journey") {
    //   percent = '17'
    // } else if (className === "team") {
    //   percent = '34'
    // } else if (className === "ai-ad") {
    //   percent = '51'
    // } else if (className === "seo") {
    //   percent = '68'
    // } else if (className === "ai-video") {
    //   percent = '85'
    // } else if (className === "blog") {
    //   percent = '100'
    // }

    if ($(this).hasClass('info')) {
      $('#progress-bar').val('0');
      $(this).nextAll().removeClass('border-change');
    } else if ($(this).hasClass(className)) {
      // $(this).nextAll().removeClass('border-change');
      $('#progress-bar').val(percent);
      $(this).prevAll().addClass('border-change');
      $(this).addClass('border-change');
    }
  });
});

var scroll = 0;
let scrollVal = '';

$(window).scroll(function () {
  console.log($('#info').offset().top);
  // 於特定區塊顯示進度條
  if ($(this).scrollTop() > $('#info').offset().top - 200) {
    $(".progress-item").css("opacity", "1");
  } else if ($(this).scrollTop() < $('#info').offset().top) {
    $(".progress-item").css("opacity", "0");
  }
  if ($(this).scrollTop() > $('#blog').offset().top - 700) {
    $(".progress-item").css("opacity", "0");
  }

  // 依捲軸高度調整 progress-bar value
  if ($(this).scrollTop() > $('#info').offset().top - 100 && $(this).scrollTop() < $('#info').offset().top + 50) {
    scrollVal = '0';
    $('.info').nextAll().removeClass('border-change');
  } else if ($(this).scrollTop() > $('#journey').offset().top - 100 && $(this).scrollTop() < $('#journey').offset().top + 50) {
    scrollVal = '20';
    $('.journey').nextAll().removeClass('border-change');
    $('.journey').prevAll().addClass('border-change');
    $('.journey').addClass('border-change');
  } else if ($(this).scrollTop() > $('#team').offset().top - 100 && $(this).scrollTop() < $('#team').offset().top + 50) {
    scrollVal = '40';
    $('.team').nextAll().removeClass('border-change');
    $('.team').prevAll().addClass('border-change');
    $('.team').addClass('border-change');
  } else if ($(this).scrollTop() > $('#ai-ad').offset().top - 100 && $(this).scrollTop() < $('#ai-ad').offset().top + 50) {
    scrollVal = '60';
    $('.ai-ad').nextAll().removeClass('border-change');
    $('.ai-ad').prevAll().addClass('border-change');
    $('.ai-ad').addClass('border-change');
  } else if ($(this).scrollTop() > $('#seo').offset().top - 100 && $(this).scrollTop() < $('#seo').offset().top + 50) {
    scrollVal = '80';
    $('.seo').nextAll().removeClass('border-change');
    $('.seo').prevAll().addClass('border-change');
    $('.seo').addClass('border-change');
  } else if ($(this).scrollTop() > $('#ai-video').offset().top - 100 && $(this).scrollTop() < $('#ai-video').offset().top + 500) {
    scrollVal = '100';
    $('.ai-video').nextAll().removeClass('border-change');
    $('.ai-video').prevAll().addClass('border-change');
    $('.ai-video').addClass('border-change');
  }
  // else if ($(this).scrollTop() > $('#blog').offset().top - 100 && $(this).scrollTop() < $('#blog').offset().top + 50) {
  //   scrollVal = '100';
  //   $('.blog').addClass('border-change');
  // }

  $('#progress-bar').val(scrollVal);
})