Response title
This is preview!
Change menu items active state while scrolling manually on one page website.
in Using jQuery
•
10 years ago
Hello,
I am trying to build up one page website, however i tried every answer which published here but couldn't figure out why it is not working.
I want my menu items to be selected as manually scrolls like in this example http://www.kristaganelon.com
Thank you in advance for all your support..
HTML
<div id="nav">
<ul>
<li><a href="#home" class="on"><img src="images/menuhome.png" width="300" height="40" /></a></li>
<li><a href="#house" class="#"><img src="images/menuhouse.png" width="300" height="40" /></a></li>
<li><a href="#services" class="#"><img src="images/menuservices.png" width="300" height="40" /></a></li>
<li><a href="#packages" class="#"><img src="images/menupackages.png" width="300" height="40" /></a></li>
<li><a href="#ourwork" class="#"><img src="images/menuourwork.png" width="300" height="40" /></a></li>
<li><a href="#faq" class="#"><img src="images/menufaq.png" width="300" height="40" /></a></li>
<li><a href="#contact" class="#"><img src="images/menucontact.png" width="300" height="40" /></a></li>
</ul>
</div><!--end nav-->
<div id="francais"></div>
</div><!--end menuwrapper-->
<div id="mainboard">
<div id="homesection"><a name="home" class="section"></a></div>
<div id="housesection"><a name="house" class="section"></a></div>
<div id="servicessection"><a name="services" class="section"></a></div>
<div id="packagessection"><a name="packages" class="section"></a></div>
<div id="ourworksection"><a name="ourwork" class="section"></a></div>
<div id="faqsection"><a name="faq" class="section"></a></div>
<div id="contactsection"><a name="contact" class="section"></a></div>
</div>
CSS
@charset "UTF-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}#menuwrapper {
float: left;
height: 100%;
width: 300px;
position: fixed;
background-color: #FFF;
margin-top: 0px;
margin-bottom: 0px;
display: block;
}
#nav {
height: 100%;
}
#logo {
background-color: #FFF;
height: 450px;
width: 300px;
margin-top: 0px;
background-image: url(images/logo.png);
}
#nav ul li {
list-style-type: none;
margin-left: -40px;
margin-top: 0px;
height: 40px;
width: 300px;
}
#francais {
background-color: #FFF;
height: 40px;
width: 300px;
top: auto;
bottom: 0px;
position: fixed;
background-image: url(images/francais.png);
}
#mainboard {
background-color: #03F;
height: 100%;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 300px;
}
#homesection {
background-color: #36C;
height: 3000px;
width: 100%;
}
#housesection {
background-color: #0FC;
height: 3000px;
width: 100%;
}
#servicessection {
background-color: #CF6;
height: 3000px;
width: 100%;
}
#packagessection {
background-color: #C36;
height: 3000px;
width: 100%;
}
#ourworksection {
background-color: #90C;
height: 3000px;
width: 100%;
}
#faqsection {
background-color: #639;
height: 3000px;
width: 100%;
}
#contactsection {
background-color: #9C6;
height: 3000px;
width: 100%;
}
#nav ul li:hover {
background-image: url(images/menuhomehover.png);
}
.on {
background-image: url(images/menuhomehover.png);
height: 40px;
width: 300px;
display: block;
}
JQUERY
<script type="text/javascript">
$(document).ready(function() {
$("#nav ul li a").click(function() {
$("#nav ul li a").removeClass("on");
$(this).addClass("on");
});
});
</script>
3