I want a div to appear at the top when user scroll down pass a div class called .header1
(This div has 3 other div inside)
I want the nav to appear in that .fixedDiv
. I found my answer here, but I have not been able to implement it on my site.
Here is what I got
<script type="text/javascript">
var startY = $('.header1').position().top + $('.header1').outerHeight();
$(window).scroll(function () {
if( $(this).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
});
</script>
And I have a div called .fixedDiv
on my site saying topnav, my problem is the div is always there. It doesn't hide or appear when scrolling down.
This is a link to my website.
For css I have nothing setup for .header1
because other div are inside and they should be the height needed for .fixedDiv
to appear. And .fixedDiv
has css
.fixedDiv {
position:fixed;
top:0px;
left:0px;
background:orange;
}
I know I'm close to getting this working but I just can't seem to figure out what I'm missing.