I have a fixed top navigation bar. The website is one page scroll type, with many pages to scroll over (like apple.com was in the past with smooth scroll).
What I am trying to do is that when my navigation bar is scrolled over a div with id #example, to change the div that contains the website navigation links from navigation bar, with other div with that contains a message.
This is what I tried, but it doesn't work because the navigation bar is fixed, so it's always on top of the screen, it's not considered scrolling. It worked before implementing one-page-scroll function. Is there a way to detect if navigation bar IS OVER the div with id #example?
$(document).scroll(function() {
if ($(this).scroll() == $("#example")) <!-- When it worked i had a number of pixels instead of the id of the div-->
{
$(".navigation-links").hide("slow", function() {});
$(".message-div").show("slow", function() {});
}
else
{
$(".message-div").hide("slow", function() {});
$(".navigation-links").show("slow", function() {});
}
});
And this is my navigation bar:
<div class="fixed-nav-bar">
<div class="navigation-links">
</div>
<div class="message-div" hidden>
<p>Start Now</p>
</div>
</div>