JonnyPaes

Untitled

Jan 8th, 2023 (edited)
768
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.49 KB | Software | 0 0
  1. window.onload = function () {
  2.   Particles.init({
  3.     selector: ".background"
  4.   });
  5. };
  6. const particles = Particles.init({
  7.   selector: ".background",
  8.   color: ["#03dac6", "#ff0266", "#000000"],
  9.   connectParticles: true,
  10.   responsive: [
  11.     {
  12.       breakpoint: 768,
  13.       options: {
  14.         color: ["#faebd7", "#03dac6", "#ff0266"],
  15.         maxParticles: 43,
  16.         connectParticles: false
  17.       }
  18.     }
  19.   ]
  20. });
  21.  
  22. class NavigationPage {
  23.   constructor() {
  24.     this.currentId = null;
  25.     this.currentTab = null;
  26.     this.tabContainerHeight = 70;
  27.     this.lastScroll = 0;
  28.     let self = this;
  29.     $(".nav-tab").click(function () {
  30.       self.onTabClick(event, $(this));
  31.     });
  32.     $(window).scroll(() => {
  33.       this.onScroll();
  34.     });
  35.     $(window).resize(() => {
  36.       this.onResize();
  37.     });
  38.   }
  39.  
  40.   onTabClick(event, element) {
  41.     event.preventDefault();
  42.     let scrollTop =
  43.       $(element.attr("href")).offset().top - this.tabContainerHeight + 1;
  44.     $("html, body").animate({ scrollTop: scrollTop }, 600);
  45.   }
  46.  
  47.   onScroll() {
  48.     this.checkHeaderPosition();
  49.     this.findCurrentTabSelector();
  50.     this.lastScroll = $(window).scrollTop();
  51.   }
  52.  
  53.   onResize() {
  54.     if (this.currentId) {
  55.       this.setSliderCss();
  56.     }
  57.   }
  58.  
  59.   checkHeaderPosition() {
  60.     const headerHeight = 75;
  61.     if ($(window).scrollTop() > headerHeight) {
  62.       $(".nav-container").addClass("nav-container--scrolled");
  63.     } else {
  64.       $(".nav-container").removeClass("nav-container--scrolled");
  65.     }
  66.     let offset =
  67.       $(".nav").offset().top +
  68.       $(".nav").height() -
  69.       this.tabContainerHeight -
  70.       headerHeight;
  71.     if (
  72.       $(window).scrollTop() > this.lastScroll &&
  73.       $(window).scrollTop() > offset
  74.     ) {
  75.       $(".nav-container").addClass("nav-container--move-up");
  76.       $(".nav-container").removeClass("nav-container--top-first");
  77.       $(".nav-container").addClass("nav-container--top-second");
  78.     } else if (
  79.       $(window).scrollTop() < this.lastScroll &&
  80.       $(window).scrollTop() > offset
  81.     ) {
  82.       $(".nav-container").removeClass("nav-container--move-up");
  83.       $(".nav-container").removeClass("nav-container--top-second");
  84.       $(".nav-container-container").addClass("nav-container--top-first");
  85.     } else {
  86.       $(".nav-container").removeClass("nav-container--move-up");
  87.       $(".nav-container").removeClass("nav-container--top-first");
  88.       $(".nav-container").removeClass("nav-container--top-second");
  89.     }
  90.   }
  91.  
  92.   findCurrentTabSelector(element) {
  93.     let newCurrentId;
  94.     let newCurrentTab;
  95.     let self = this;
  96.     $(".nav-tab").each(function () {
  97.       let id = $(this).attr("href");
  98.       let offsetTop = $(id).offset().top - self.tabContainerHeight;
  99.       let offsetBottom =
  100.         $(id).offset().top + $(id).height() - self.tabContainerHeight;
  101.       if (
  102.         $(window).scrollTop() > offsetTop &&
  103.         $(window).scrollTop() < offsetBottom
  104.       ) {
  105.         newCurrentId = id;
  106.         newCurrentTab = $(this);
  107.       }
  108.     });
  109.     if (this.currentId != newCurrentId || this.currentId === null) {
  110.       this.currentId = newCurrentId;
  111.       this.currentTab = newCurrentTab;
  112.       this.setSliderCss();
  113.     }
  114.   }
  115.  
  116.   setSliderCss() {
  117.     let width = 0;
  118.     let left = 0;
  119.     if (this.currentTab) {
  120.       width = this.currentTab.css("width");
  121.       left = this.currentTab.offset().left;
  122.     }
  123.     $(".nav-tab-slider").css("width", width);
  124.     $(".nav-tab-slider").css("left", left);
  125.   }
  126. }
  127.  
  128. new NavigationPage();
Add Comment
Please, Sign In to add comment