I am working on a website to help out a relative, but am new to web development and have little experience. Right now, I am have a few divs that I want to manipulate as you scroll down, and undo the changes as you scroll up. The issue I am facing is that the divs change (shrink/slide/etc) properly after the scroll bar crosses a certain point, but if you go back up to the top, nothing happens, so the animations only run once. ".animate" is the only event that's giving me an issue, while the remaining events work flawlessly. Here is a copy 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 my jQuery code:
$(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%");
}
})
})