I am having some trouble with scrollspy and smooth scrolling. Please keep in mind that I am new to this thing, just good with my google-fu. :)
The problem is quite frustrating, I 've been trying a whole lot of different solutions the past couple of days but none seems to be working. I am using bootstrap scrollspy and smooth scrolling on single page with 4 sections. Each section has its own glyphicon in the navbar, which should turn pink when that section has been scrolled to. When I click the second icon, it works as intended. When I click on the 3rd one, the 2nd one stays pink, that is active. When I click on the 4th one, the 3rd turns white and the 2nd one stays pink. Furthermore, when scrolling manually, only the first two icons change colour. It is probably easier if you see this behaviour yourselves.
http://codepen.io/bohemian83/pen/wMbRZK
This is my code.
<html>
<body data-spy="scroll" data-offset="50" data-target=".navbar">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 0;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
</script>
<style>
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
.google {
font-family:"Poiret One",sans-serif;
}
.navbar .navbar-brand {
color: white !important;
}
.navbar .navbar-nav > li > a {
color: white;
padding: 20px 30px 10px 30px;
}
.navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
padding-top: 30px;
color: white;
}
.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
background-color: rgba(255,255,255,0);
color: pink;
}
ul.nav li.active a {
color: pink;
}
.glyphicon {
font-size: 20px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: white /* change this to any color you want! */;
}
#first {
background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/wallpaper-1948122_zpsjnr4n9n2.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#second {
background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/meteora-10_zps7j9jqszn.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#third {
background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/duesseldorf_wertig_zps1hk1ollh.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#fourth{
background: url(https://i.ytimg.com/vi/24i8G5a5d5Q/maxresdefault.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
width: 100%;
height: 90%;
min-height:90%;
}
html, body, #first, #second, #third, #fourth {
height: 100%;
}
#myName {
font-weight: bold;
font-size: 50px;
}
@media (max-width: 768px){
.navbar-nav li{
text-align: right;
}
}
html, #first, #second, #third, #fourth {
height: 100%;
}
body {
position: relative;
}
#myName {
font-weight: bold;
font-size: 50px;
}
@media (max-width: 768px){
.navbar-nav li{
text-align: right;
}
}
</style>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand google" href="#" style="margin-left:80px" id="myName">PANAGIOTIS</a>
</div>
<div class="navbar-collapse collapse pull-right" style="margin-right:50px">
<ul class="nav navbar-nav">
<li><a class="scroll-link" data-id="first" href="#first"><span class="glyphicon glyphicon-home" id="ul-selected"></span></a></li>
<li><a class="scroll-link" data-id="second" href="#second"><span class="glyphicon glyphicon-user" id="ul-selected"></span></a></li>
<li><a class="scroll-link" data-id="third" href="third"><span class="glyphicon glyphicon-th" id="ul-selected"></span></a></li>
<li><a class="scroll-link" data-id="fourth" href="fourth"><span class="glyphicon glyphicon-envelope" id="ul-selected"></span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<section id="first">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
<section id="second">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
<section id="third">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
<section id="fourth">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
</body>
</html>
Update: You're code works, you just don't have your anchor IDs set correctly inside your nav list.
href="third" and href="fourth" should be href="#third" and href="#fourth"
See working example Snippet.
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event) {
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function(event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed) {
var offSet = 0;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({
scrollTop: targetOffset
}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() {}
};
}@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
position: relative;
}
html,
body,
#first,
#second,
#third,
#fourth {
height: 100%;
}
.navbar.navbar-default {
background-color: transparent;
background: transparent;
border-color: transparent;
padding-top: 30px;
color: white;
}
.navbar.navbar-default .navbar-brand {
color: white;
font-weight: bold;
font-size: 50px;
font-family: "Poiret One", sans-serif;
}
@media (min-width: 768px) {
.navbar.navbar-default .nav > li {
margin-left: 15px;
}
}
.navbar.navbar-default .nav > li > a {
color: white;
}
.navbar.navbar-default .nav > li.current-menu-item > a,
.navbar.navbar-default .nav > li.current-menu-ancestor > a,
.navbar.navbar-default .nav > li > a:hover,
.navbar.navbar-default .nav > li > a:focus {
background-color: rgba(255, 255, 255, 0);
color: pink;
}
.navbar.navbar-default .nav li.active a {
color: pink;
}
.navbar.navbar-default .glyphicon {
font-size: 20px;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: white;
}
@media (max-width: 767px) {
.navbar.navbar-default .navbar-toggle {
margin-top: 0px;
}
.navbar.navbar-default .nav > li {
text-align: right;
margin-right: 12.5px;
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
}
@media (max-width: 400px) {
.navbar.navbar-default .navbar-brand {
font-size: 35px;
}
}
#first {
background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/wallpaper-1948122_zpsjnr4n9n2.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#second {
background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/meteora-10_zps7j9jqszn.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#third {
background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/duesseldorf_wertig_zps1hk1ollh.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#fourth {
background: url(https://i.ytimg.com/vi/24i8G5a5d5Q/maxresdefault.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PANAGIOTIS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="scroll-link" data-id="first" href="#first"><span class="glyphicon glyphicon-home" id="ul-selected"></span></a>
</li>
<li><a class="scroll-link" data-id="second" href="#second"><span class="glyphicon glyphicon-user" id="ul-selected"></span></a>
</li>
<li><a class="scroll-link" data-id="third" href="#third"><span class="glyphicon glyphicon-th" id="ul-selected"></span></a>
</li>
<li><a class="scroll-link" data-id="fourth" href="#fourth"><span class="glyphicon glyphicon-envelope" id="ul-selected"></span></a>
</li>
</ul>
</div>
</div>
</nav>
<section id="first">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
<section id="second">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
<section id="third">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
<section id="fourth">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1></h1>
</div>
</div>
</div>
</section>
</body>