I have recently ventured into the world of web development to assist a family member with their website. My knowledge and experience are limited, but I am facing an interesting challenge. I am trying to manipulate certain divs as users scroll down the page and undo those changes when they scroll back up. The issue I'm encountering is that while the divs shrink, slide, etc., once the scroll bar hits a specific point, the animations do not revert when scrolling back up. The problem seems to be centered around ".animate," as other events work perfectly fine. Below is a snapshot of my HTML code:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Sarah's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="navigationbar.js"></script>
</head>
<body>
<div id="image">
<img src="Project Images\\Sarah.png" id="Sarah">
</div>
<div id="name">
<h1>Sarah James</h1>
<h2 id="objective">OBJECTIVE</h2>
</div>
<table id="navbar" cellspacing=0>
<tr>
<td><u><i><a href="index.html">Home</a></u><i></td>
<td><a href="resume.html">Resume</a></td>
<td><a href="portfolio.html">Portfolio</a></td>
<td><a href="contact.html">Contact Me</a></td>
</tr>
</table>
<div id="topbar"></div>
<div id="rotatingblock" align="middle">
<img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-4-1.jpg">
<img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-5-1.jpg">
<img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-6-1.jpg">
<script src="rotationblock.js"></script>
</div>
</body>
</html>
And here is my jQuery snippet:
$(document).ready(function(){
$(window).scroll(function () {
var $scroll=$(window).scrollTop();
if ($scroll>60){
console.log ("bigger than 40 and is " + $scroll);
$("#name").animate({top:"2%",height:"13%",left:"35%"},500);
$("#image").animate({width:"8%",left:"5%",top:"3%"},500);
$("#navbar").animate({top:"-17%"},500);
$("#topbar").animate({height:"25%"},500);
$("#objective").html("<h2></h2>");
$("td").animate({height:"20%"},500);
$("a").css("font-size","150%");
}
else{
console.log ("smaller than 40 and is " + $scroll);
$("#name").animate({height:"21.5%",left:"40%"},500);
$("#image").animate({width:"15%",left:"0%",top:"2%"},500);
$("#navbar").animate({top:"1.3%"},500);
$("#topbar").animate({height:"43%"},500);
$("#objective").html("OBJECTIVE");
$("td").animate({height:"20%"},500);
$("a").css("font-size","175%");
}
})
})