jquery - Change list element class on smoothscroll -
i trying change class of list < li> element class="active" when scroll it.
function onscroll(event){ var scrollpos = $(document).scrolltop(); $('#menu').each(function () { var currlink = $(this); var refelement = $(currlink.attr("href")); if (refelement.position().top <= scrollpos && refelement.position().top + refelement.height() > scrollpos) { $('#menu ul li').removeclass("active"); //added remove active class elements currlink.addclass("active"); } else{ currlink.removeclass("active"); } }); here menu
<div class="navbar navbar-inverse" data-spy="affix" id="header" role="navigation" data-offset-top="100"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> </div> <div class="navbar-collapse collapse" id="menu"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#">testimonials</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="dropdown-header">description header</li> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">more links</a></li> <li><a href="#">and 1 grow on</a></li> </ul> </li> <li><a href="#">contact</a></li> </ul> </div><!--/.navbar-collapse --> </div> </div> i not sure if i'm modifying list element correctly or not. smooth scrolling works fine, class won't change.
thanks!
try like,
$("li").click(function(){ $(".active").removeclass(".actvie"); $(this).addclass("active"); });
Comments
Post a Comment