Menu
Im trying to use scroll-spy to add an active class to the ul li on a one page scroll and sticky nav, for some unknown reason i cant get this work with-in my project.
Below is the layout of my menu:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<img class="" src="img/logo-p.png"/>
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li>
<a class="page-scroll" href="#item4">item4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->
<div id="home-page" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
//many divs css parallax--
The nav js file is below:
$('.parallax').scroll(function() {
if ($('.parallax').scrollTop() > 100) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".my-nav").addClass("nav-resize");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".my-nav").removeClass("nav-resize");
$(".moveLogo").removeClass("moveLogo-resize");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var position = $($anchor.attr('href')).offset().top + $('.parallax').scrollTop() ;
$('html,body,.parallax').stop().animate({
scrollTop: position
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
If i was to use the above method without the parallax divs etc this will work with no problems but at the moment the li class is active always on the last li item when scrolling down the page.
green = scroll-able content inside parent container" Blue ", green divs are to target id's.
.blue{
height:100%;
width:100%;
overflow:hidden;
}
.green // Has many divs
I tried the obvious to target the green > divs but it doesn't seem to work.
592
on('click','li',function(){ $(this). addClass("active"); // adding active class }); The above code will add the active class to the li tag whenever the user clicks on the Li element.
To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used.
The active class is applied to the navigation element the user is currently viewing. In the case of your given code, the user is viewing the the profile. It will serve as a guide or reminder to where in the website the visitor is in.
Your code didn't give enough to go off of, so I added a series of divs that are 1000px tall and have different background colors - all of which corresponded to the IDs in your nav menu - scroll spy is working. Perhaps you just didn't have enough content to scroll or were implementing the IDs incorrectly?
Note that I'm also using recent versions of Bootstrap and jQuery...
Check the fiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li>
<a class="page-scroll" href="#item4">item4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->
<div id="home-page" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
<div style="height:1000px; background:pink"></div>
</div>
</div>
<div id="item2" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
<div style="height:1000px; background:red"></div>
</div>
</div>
<div id="item3" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
<div style="height:1000px; background:green"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
