Hey there! I'm currently working on implementing a menu that slides down from the top of the page after scrolling to a specific point and remains fixed at the top of the browser. However, I've encountered an issue with the jquery animate function not functioning as expected. Interestingly, when I include an alert("hello") right after the animate function, it works perfectly fine. Here is the code for my function:
function header()
{
var main = document.getElementById("main");
var rect = main.getBoundingClientRect();
var menu = document.getElementById("menuappear");
var y = rect.top;
if (y <= 5)
{
$("#menuappear").animate({top:"0px"}, 500);
}
else
{
$("#menuappear").animate({top:"-93px"}, 500);
}
}
Here's my HTML structure:
<body onscroll="header()">
...
<div id="menuappear">
<a href="index.html"><img class="logo" src="images/logo.png" /></a>
<ul>
<li><a onclick="scrolltop()">Home</a></li>
<li><a href="index.html">What We Do</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
Furthermore, here is the corresponding CSS:
#menuappear{
z-index: 1000000;
position: fixed;
top: -93px;
width: 100%;
height: 90px;
background-color: #242424;
margin: 0;
padding: 0;
border-bottom: 3px solid #49CBCD;
}
If you have any insights or suggestions on what might be causing this issue, please let me know. EDIT: The functionality seems to work intermittently and is not very responsive.