Fixed scrolling issue in about-me page

DugarRishab · Mar 18, 2022 · 146ec48 · 146ec48
1 parent 1b73018
commit 146ec48
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 		<title>Rishab Dugar</title>
 		<link rel="icon"  type='image/x-icon' href="./img/logo2.png">
 	</head>
-	<body class="projects">
+	<body class="home">
 		<div id="circle" class="circle"></div>
 		<div id="bg-circles" class="bg-circle"></div>
 
@@ -71,7 +71,7 @@
 
 
 
-		<div class="home-page" id="home-page">
+		<div class="home-page active" id="home-page">
 
 			<div class="section left">
 				<div class="text">
@@ -106,7 +106,7 @@
 
 
 		</div>
-		<div class="projects-page active" id="projects-page">
+		<div class="projects-page" id="projects-page">
 			<div class="title">My Projetcs</div>
 			<div class="content">
 

diff --git a/style.css b/style.css
@@ -176,6 +176,8 @@ body.projects .projects-bg .item .content .icons i:hover::after{
 	flex-direction: row;
 	width: 100vw;
 	position: absolute;
+	top: 0;
+	left: 0;
 }
 .home-page.active{
 	opacity: 100%;
@@ -185,6 +187,8 @@ body.projects .projects-bg .item .content .icons i:hover::after{
 	opacity: 0%;
 	z-index: -100;
 	position: absolute;
+	top: 0;
+	left: 0;
 }
 .about-page.active{
 	opacity: 100%;
@@ -194,6 +198,8 @@ body.projects .projects-bg .item .content .icons i:hover::after{
 	opacity: 0%;
 	z-index: -100;
 	height: 2000px;
+	top: 0;
+	left: 0;
 }
 .projects-page.active{
 	opacity: 100%;
@@ -767,4 +773,4 @@ body.projects .projects-page .title{
 		opacity: 0;
 
 	}
-}
+}
diff --git a/style.js b/style.js
@@ -8,7 +8,8 @@ window.onload = () => {
 	}
 	if (body.classList.contains("home")) {
 
-		scrollAboutMe();
+		//scrollAboutMe();
+		scrollingEffectOnHome();
 	}
 }
 const mouseFunctions = () => {
@@ -172,7 +173,7 @@ const pageChange = () => {
 		//console.log('click detected');
 
 		window.scrollTo(0, 0);
-		scrollingEffectOnHome();
+		//scrollingEffectOnHome();
 		//window.scrollY(0, 0);
 
 	});
@@ -245,8 +246,6 @@ const scrollAboutMe = () => {
 }
 const scrollingEffectOnHome = () => {
 
-	console.log("scrolling");
-
 		const loadingTime = 2000;
 		const body = document.querySelector("body");
 
@@ -263,34 +262,45 @@ const scrollingEffectOnHome = () => {
 		const aboutToken = document.querySelector("#about-me-blob");
 		const projectsToken = document.querySelector(".projects-bg");
 
-		window.addEventListener("scroll", () => {
+	window.addEventListener("scroll", (e) => {
+		console.log("scrolling");
 
+		e.preventDefault();
+		console.log(window.scrollY);
+
+		if (window.scrollY > 50) {
 			menuItems.forEach(item => {
 				item.classList.remove("active");
 			});
 			aboutBtn.classList.add("active");
-
+	
 			aboutToken.style.animation = `blob-expand-animation ${loadingTime}ms 1`;
-
+	
 			setTimeout(() => {
-
+	
 				body.classList.remove(...body.classList);
 				body.classList.add("about-me");
 				window.scrollTo(0, 0);
-
+					
 			}, loadingTime * 2 / 3);
 			setTimeout(() => {
-
+					
 				homePage.classList.remove('active');
 				projectsPage.classList.remove('active');
 				aboutToken.style.animation = "";
-
+		
 			}, loadingTime * 4 / 5);
 			setTimeout(() => {
-
+					
 				aboutPage.classList.add('active');
-
-
+					
+		
 			}, loadingTime * 5 / 5);
-		});
+		}
+
+
+	},{
+		passive: false
+	});
 }
+