У меня проблемы с прокруткой и плавной прокруткой. Пожалуйста, имейте в виду, что я новичок в этом деле, просто хорошо разбираюсь в google-fu. :)
Проблема довольно неприятная, за последние пару дней я пробовал много разных решений, но ни одно из них не работает. Я использую bootstrap scrollspy и плавную прокрутку на одной странице с 4 разделами. Каждый раздел имеет свой собственный глификон на панели навигации, который должен стать розовым при прокрутке до этого раздела. Когда я нажимаю второй значок, он работает по назначению. Когда я нажимаю на 3-й, 2-й остается розовым, то есть активным. Когда я нажимаю на 4-й, 3-й становится белым, а 2-й остается розовым. Кроме того, при ручной прокрутке только первые две иконки меняют цвет. Наверное, будет проще, если вы сами увидите такое поведение.
http://codepen.io/bohemian83/pen/wMbRZK
Это мой код.
<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>